Question

我设法通过以下代码获取数据并显示到UI：

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之外，但是我不知道它是什么。请指教。

Answer 1

第二个代码不起作用的原因是，如果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会更好。

React Native：访问this.props内部函数

1 个答案: