Question

我想重构我的以下代码以使用循环显示多个图标。我尝试过查找示例，但到目前为止，我发现地图已在数组上使用，但是我没有数组或任何集合。

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />
        <Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />
        <Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />
        <Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />
        <Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />
</View>

https://vuex.vuejs.org/guide/actions.html

Answer 1

将其拆分为小函数

const renderIcon = () => <Icon
  type="FontAwesome"
  name="star"
  style={{ fontSize: 30, color: '#f1c40f' }}
/>;

const renderIcons = num => [...Array(num)].map(renderIcon);

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  {renderIcons(5)}
  {renderIcons(4)}
  {renderIcons(3)}
  {renderIcons(2)}
  {renderIcons(1)}
</View>

您可以更进一步，将name style添加到renderIcon

Answer 2

您可以使用返回图标标签数组的函数来渲染这些星星，请检查以下代码段。

export default class App extends React.Component {
createStars = () => {
 let stars = []

    for (let i = 0; i < 5; i++) {

      stars.push(<Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />)
    }
    return stars
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        {this.createStars()}
        </View>
      </View>
    );
  }
}

Answer 3

您似乎想显示star rating。

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  {() => {
    let stars =[];    
    for(let i =0;i<5;i++){
        stars.push(<Icon
          type="FontAwesome"
          name="star"
          style={{ fontSize: 30, color: '#f1c40f' }}
        />);
    }
    return stars;
  }}
</View>

但是我建议使用React Star Ratings 来显示您的评分。

循环渲染重复组件

3 个答案: