代码之家 › 专栏 › 技术社区 › Jeaf Gilbert

react native:访问函数内部的this.props

react-native javascript

Jeaf Gilbert · 技术社区 · 6 年前

我设法获取数据并用此代码显示给用户界面:

export default class BoxGarage extends Component {
    render() {
        let garage = this.props.garage;
        garage.name = garage.name.replace('strtoreplace', 'My Garage');

        let cars = garage.cars.length ?
            garage.cars.map((val, key) => {
                return (
                    <Car key={key} car={val} />
                )
            }) : (
                <View style={styles.boxEmpty}>
                    <Text style={styles.textEmpty}>(No Cars)</Text>
                </View>
            );

        return (
            <View style={styles.boxGarage}>
                <Text>{ garage.name }</Text>
                { cars }
            </View>
        )
    }       
}

然后我试着改变功能,但没有显示汽车。缺少什么?

export default class BoxGarage extends Component {
    render() {
        let garage = this.props.garage;
        garage.name = garage.name.replace('strtoreplace', 'My Garage');

        cars = function(garage) {
            if (garage.cars.length) {
                garage.cars.map((val, key) => {
                    return (
                        <Car key={key} car={val} />
                    );
                });
            }
            else {
                return (
                    <View style={styles.boxEmpty}>
                        <Text style={styles.textEmpty}>(No Cars)</Text>
                    </View>
                );
            }
        }

        return (
            <View style={styles.boxGarage}>
                <Text>{ garage.name }</Text>
                { cars(this.props.garage) }
            </View>
        )
    }       
}

我认为我应该重构以获得最佳实践,要么使用构造函数,要么将函数移出render,但我不知道它是什么。请教。

1 回复 | 直到 6 年前

Nicholas Tower 6 年前

第二个代码不起作用的原因是,如果garage.cars.length>0,则不会从函数返回任何内容。

if (garage.cars.length) {
  // Added a return statement on the next line
  return garage.cars.map((val, key) => {
    return (
      <Car key={key} car={val} />
    );
  });
}

也就是说,我认为您的第一个版本的代码要干净得多。如果一段代码变得足够复杂,以至于我想做一个内联函数来进行计算,那么我要么把它提取到另一个类方法中,要么提取到另一个组件中。但在你的情况下,只做三元或者if/else会更好。

推荐文章