javascript - 如何显示作为 props 传递给功能组件的数组元素？

Question

我创建了 amenitiesArray，其中包含 Club_house、Swimming_pool 等元素。我使用 .map() 映射此 amenitiesArray，但是当我将它作为 Prop 传递时，我无法在屏幕上显示它，为什么会这样？

console.log(amenitiesArray) 是:

0:"Gymnasium"
1:"swimming_pool"
2:"club_house"
3:"childrens_play_area"
4:"multipurpose_room"
5:"security"
6:"jogging_track"
7:"power_backup"
8:"landscaped_gardens"
9:"car_parking"

代码:

const DisplayAmenities = ({ name }) => (
  <Text style={{ color: 'black', fontSize: 16 }}>{name}</Text>
);

export default class Project extends Component {
  render() {
    let amenitiesArray = [];

    for (var key in amenities[0]) {
      if (amenities[0][key] === 'Yes') {
        amenitiesArray.push(key);
      }
    }
    console.log(amenitiesArray);

    return (
      <ScrollView>
        <View style={{ marginTop: 20 }}>
          {amenitiesArray.map(val => {
            <DisplayAmenities name={val} />;
          })}
        </View>
      </ScrollView>
    );
  }
}

上面的代码在屏幕上没有显示任何内容？为什么会这样？

Answer 1

因为你忘记归还组件。尝试像这样修复:

 return (
      <ScrollView>
        <View style={{ marginTop: 20 }}>
          {amenitiesArray.map((val,index) => {
            return <DisplayAmenities key={index} name={val} />;  //fixed
          })}
        </View>
      </ScrollView>
    );

简而言之，您可以省略大括号，如下所示

 return (
      <ScrollView>
        <View style={{ marginTop: 20 }}>
          {amenitiesArray.map((val,index) => <DisplayAmenities key={index} name={val} /> )}
        </View>
      </ScrollView>
    );