条件渲染问题

Question

我正在尝试做一个条件渲染，但没有用。

那是我的功能

populateBodyInstallationsEdition() {
    letshow = null;
    console.log(this.state.installations);
    for (let i = 0; i < this.state.IdInstallGroup.length; i++) {
      for (let j = 0; j < this.state.installations.length; j++) {
        console.log(this.state.IdInstallGroup[i]);
        console.log(this.state.installations[j].id);
        if (this.state.IdInstallGroup[i] === this.state.installations[j].id) {
          show = (
            <div>
              <div>
                <input
                  type="checkbox"
                  value="None"
                  className="test"
                  id={this.state.installations[j].id}
                  name={this.state.installations[j].Name}
                  checked
                />
                {/* <label htmlFor={arr[index].id} /> */}
              </div>
              <label htmlFor={this.state.installations[j].id}>
                {this.state.installations[j].Name}
              </label>
            </div>
          );
        } else {
          show = (
            <div>
              <div>
                <input
                  type="checkbox"
                  value="None"
                  className="test"
                  id={this.state.installations[j].id}
                  name={this.state.installations[j].Name}
                />
                {/* <label htmlFor={arr[index].id} /> */}
              </div>
              <label htmlFor={this.state.installations[j].id}>
                {this.state.installations[j].Name}
              </label>
            </div>
          );
        }
      }
    }
    return show;
  }

条件正在做出正确的比较，但不要嘲笑JSX

怎么了？

我该如何解决这个问题？

Answer 1

好吧，答案正确...

如果要渲染所有安装：

1. 将login替换为let show = null;
2. 将let show = [];替换为show = (

就是这样...为什么？因为您的函数要同时迭代两个数组，并且始终根据条件将'show'设置为当前组件，所以这将始终仅呈现一个组件。

按照上述建议更新代码会将“条件”组件中的每一个添加到随后将要呈现的数组中，而不仅仅是一个。

但是，我不能说它是正确的解决方案，只是因为它会起作用，所以让我向您展示其他替代方案，以更好地实现此目标。

选项1：：采用相同的方法，但不重复代码。

条件的两个部分完全相同，除了“ checked”属性外，react允许您执行以下操作：

show.push(

相关代码populateBodyInstallationsEdition = () => { let show = []; for (let i = 0; i < this.state.IdInstallGroup.length; i++) { for (let j = 0; j < this.state.installations.length; j++) { show.push( <div> <div> <input type="checkbox" value="None" className="test" id={this.state.installations[j].id} name={this.state.installations[j].Name} checked={this.state.IdInstallGroup[i] === this.state.installations[j].id} // <=PAY ATTENTION HERE /> </div> <label htmlFor={this.state.installations[j].id}> {this.state.installations[j].Name} </label> </div> ); } } return show; };

选项2：提取组件

checked={this.state.IdInstallGroup[i] === this.state.installations[j].id}

选项3：摆脱“ populateBodyInstallationsEdition”功能，并在渲染主体中使用“地图”（使用我们之前定义的相同组件）

//This component can go on a separate file
const MyComponent = ({id, name, isChecked = false}) => {
  return(
    <div>
      <div>
        <input
          type="checkbox"
          value="None"
          className="test"
          id={id}
          name={name}
          checked={isChecked}
        />
      </div>
      <label htmlFor={id}>
        {name}
      </label>
    </div>
  )
}

populateBodyInstallationsEdition = () => {
    let show = [];

    for (let i = 0; i < this.state.IdInstallGroup.length; i++) {
      for (let j = 0; j < this.state.installations.length; j++) {

        let id = this.state.installations[j].id;
        let name = this.state.installations[j].Name;
        let isChecked = this.state.IdInstallGroup[i] === this.state.installations[j].id;

        show.push(
          <MyComponent id={id} name={name} isChecked={isChecked} />
        );
      }
    }
    return show;
  };

Answer 2

 import React from 'react';

const populateBodyInstallationsEdition = () => {
    return (
        <React.Fragment>
            {
                IdInstallGroup && IdInstallGroup.map((group) => {
                    return (
                        installations && installations.map((install) => {
                            return (
                                <div>
                                    {
                                        this.state.IdInstallGroup[group] === this.state.installations[install].id ?
                                            <div>
                                                <div>
                                                    <input
                                                        type="checkbox"
                                                        value="None"
                                                        className="test"
                                                        id={this.state.installations[install].id}
                                                        name={this.state.installations[install].Name}
                                                        checked
                                                    />
                                                    {/* <label htmlFor={arr[index].id} /> */}
                                                </div>
                                                <label htmlFor={this.state.installations[install].id}>
                                                    {this.state.installations[install].Name}
                                                </label>
                                            </div>
                                            :
                                            <div>
                                                <div>
                                                    <input
                                                        type="checkbox"
                                                        value="None"
                                                        className="test"
                                                        id={this.state.installations[install].id}
                                                        name={this.state.installations[install].Name}
                                                    />
                                                    {/* <label htmlFor={arr[index].id} /> */}
                                                </div>
                                                <label htmlFor={this.state.installations[install].id}>
                                                    {this.state.installations[install].Name}
                                                </label>
                                            </div>
                                    }
                                </div>
                            )

                        })
                    )

                })
            }
        </React.Fragment>
    )
}

export default populateBodyInstallationsEdition;

尝试这种有条件的渲染方式。 另外，您可以使用map遍历每个元素并将条件放入其中。