Question

我尝试渲染一组消息但是希望它在不同的情况下按类来呈现，条件是我的代码如下：

render() {
      return (
      <div>
      {this.props.messages.map((m, index) => (
          //if m.id === 1 render this:
          <p className={someClass1}>Hello, {m.message}!</p>
          //else render this:
          <p className={someClass2}>Hi, {m.message}!</p>
      ))}
      </div>);
  }

Answer 1

您可以轻松地为地图添加逻辑。你只需要内容不是反应组件的内联返回。

render() {
    return (
        <div>
            {this.props.messages.map((m, index) => {
                if (m.id === 1){
                    return <p className={someClass1}>Hello, {m.message}!</p>
                }
                return <p className={someClass2}>Hi, {m.message}!</p>
            })}
        </div>
      );
  }

你也可以在你的渲染回报之外用forEach做同样的事情，如此

render() {
    const elems = [];
    this.props.messages.forEach( (m, index) => {
        if (m.id === 1) {
            elems.push(<p className={someClass1}>Hello, {m.message}!</p>);
        } else {
            elems.push(<p className={someClass2}>Hi, {m.message}!</p>);
        }
    return (
        <div>
            {elems}
        </div>
      );
  }

如何在映射函数内的React和ES6中进行condtitional渲染

1 个答案: