React / JSX 动态组件数

Question

在 React 中，是否可以渲染可变数量的 HTML 标签或 React 组件？

例如，在下面的代码中，this.renderStats()可以根据变量stats.health和stats.energy呈现 0 到 2 个<i>标签。

以下代码打印出[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 /> (