Question

在React中，是否可以呈现可变数量的HTML标签或React Components？

例如，在下面的代码中，this.renderStats()可以呈现0到2个<i>代码，具体取决于变量stats.health和stats.energy。

以下代码打印出[object Object]

class Hero extends React.Component {

    showBadges(stats) {
        let badgeList = []
        if (stats.health > 1000) {
            badgeList += <i className="fa fa-times-circle" style={{color: "red"}}></i>
        }
        if (stats.energy > 100) {
            badgeList += <i className="fa fa-times-circle" style={{color: "blue"}}></i>
        }
        return badgeList;
    }

    renderStats() {
        return this.props.users.map((stats) => {
            return (
                <Td className="align-middle" column="badges">{ this.showBadges(stats) }</Td>
            );
        });
    }

    render() {
        return ( 
            <Table>
                { this.renderStats() } 
            </Table>
        );
    }

}

Answer 1

将showBadges功能更改为：

showBadges(stats) {
    let badgeList = []
    if (stats.health > 1000) {
       badgeList.push(<i className="fa fa-times-circle" style={{color: "blue"}}></i>)
    }
    if (stats.energy > 100) {
       badgeList.push(<i className="fa fa-times-circle" style={{color: "blue"}}></i>)
    }
    return badgeList;
}

它应该有用。

Answer 2

你可以像@Boky指出的那样动态创建一个子列表，或者充分利用JSX并使用内联表达式：

showBadges(stats) {
  return (
    <span>
      {
        stats.health > 1000 &&
        <i className="fa fa-times-circle" style={{color: "blue"}}></i>
      }
      {
        stats.energy > 100 &&
        <i className="fa fa-times-circle" style={{color: "blue"}}></i>
      }
    </span>
  )
}

您可以使用简单的布尔表达式（condition && <Component />）或三元运算符（condition ? <ComponentIfTrue /> : <ComponentIfFalse />）

React / JSX动态组件数

2 个答案: