Question

我是一名React新手，并且有一个组件通过映射数组输出复选框列表。这是目前有效的代码。

    export default class First extends React.Component {
       constructor(props) {
        super(props);
       this.state = {
          data: data,
     };
    }

    render() {
       return (
        <div>
          {this.state.data.map(d =>
             <label key={ d.name } className="control control--checkbox">{d.name}
             <input type="checkbox"/>
             <div className="control__indicator"></div>
            </label>)}
       </div>
        );
    }
  }

我需要做的是添加一个if / else告诉返回映射函数，如果数组中的另一个变量（称为domain）=“HMO”，则仅渲染复选框列表。我真的在努力学习语法。我认为它需要插入{this.state.data.map（d =＆gt;行）下方，但我确实卡住了。非常感谢任何帮助。

Answer 1

我相信你正在寻找类似的东西。

export default class First extends React.Component {
   constructor(props) {
    super(props);
   this.state = {
      data: data,
 };
}

render() {
  return (
    <div>
      {this.state.data.map(d => {
        if(d.domain === "HMO"){
          return (
           <label key={ d.name } className="control control--checkbox">{d.name}
             <input type="checkbox"/>
             <div className="control__indicator" />
           </label>
         )}
        return null
      })}
    </div>
    )
  }
}

.map函数将遍历数据数组中的每个元素，然后检查该元素的域变量是否等于字符串＆＃34; HMO＆＃34;。如果是，它将返回显示复选框的html，否则返回null。

Answer 2

使用Array.filter：

export default class First extends React.Component {

    constructor(...args) {
        super(...args);
        this.state = {
            data: data
        };
    }

    getItems() {
        return this.state.data
            .filter(d.domain === "HMO")
            .map(d => (
                <label key={ d.name } className="control control--checkbox">{d.name}
                    <input type="checkbox"/>
                    <div className="control__indicator"></div>
                </label>
            ));
    }

    render() {
        return (
            <div>
                {this.getItems()}
            </div>
        );
    }
}

缺点是，与@ MEnf的解决方案相比，你循环两次，所以如果你有一个非常长的数组，它可能会更慢。好处是它看起来更整洁（我知道这是非常主观的）。

如何在React data.map函数中添加条件语句

2 个答案: