React Native:访问函数内部的this.ops

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>
)
}       
}

我认为我应该重构以获得最佳实践，要么使用构造函数，要么将函数移到呈现之外，但我不知道它是什么。请给出建议。

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会更好。