React / JSX动态组件数

Question

In React, is it possible to render a variable number of HTML tags or React Components?

For example, in the code below, this.renderStats() can render 0 to 2 <i> tags depending on the variables stats.health and stats.energy .

The following code prints out [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

Change your showBadges function to:

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

And it should work.

Answer 2

You can either create a list of children dynamically as @Boky pointed out or take a full advantage of JSX and use inline expressions:

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

You can use either simple boolean expression ( condition && <Component /> ) or ternary operator ( condition ? <ComponentIfTrue /> : <ComponentIfFalse /> )