反应 |如何添加动态的新 div，如行答案

【问题标题】：React | How to add dynamic new divs like rows反应 |如何添加动态的新 div，如行
【发布时间】：2018-10-28 10:28:58
【问题描述】：

我在制作动态新 div 时遇到了麻烦。谁能帮我做这件事。

这是我的 div。

<div className="intent" id="intent1" style={{border:'1px solid #eee'}}>
                <div className="form-group row">
                    <label htmlFor="intent" className="col-sm-1 col-form-label">Intent</label>
                    <div className="col-sm-5">
                    <input type="text" className="form-control" name="indent[]" id="intent1" placeholder="Enter intent"/>
                    </div>
                </div>
            </div>

我需要动态地加/减上面的div。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以通过array 进行管理，在添加行时在array 中添加项目并相应地删除它们。您可以执行以下操作

class App extends React.Component {

constructor() {
    super();
    this.state = {
      rowList: [true]
    };
  }

  add() {
    let rowList = [...this.state.rowList];
    rowList.push(true);
    this.setState({ rowList });
  }

  remove(i) {
    let rowList = [...this.state.rowList];
    rowList.splice(i, 1);
    this.setState({ rowList });
  }

  render() {
    let { rowList } = this.state;
    return (
      <div className="intent" id="intent1" style={{border:'1px solid #eee'}}>
        {rowList.map((x, i) => {
          return (
            <div className="form-group row" key={i}>
              <label htmlFor="intent" className="col-sm-1 col-form-label">
                Intent 
              </label>
              <div className="col-sm-5">
                <input
                  type="text"
                  className="form-control"
                  name="indent[]"
                  placeholder="Enter intent"
                />
                <button onClick={() => this.remove(i)} >Remove</button>
              </div>
            </div>
          )
        })}
        <button onClick={() => this.add()}>Add New</button>
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

【讨论】：

【解决方案2】：

这里没有大量的上下文。您是否尝试动态显示/隐藏或显示多个？

您可以使用普通的旧 js 逻辑 AND 运算符来显示/隐藏：|jsVariable| && <div/>

您可以使用 js 数组上的 map 函数动态显示同一 div 的多个条目：|jsArray|.map(item => <div/>)

【讨论】：

我正在尝试动态添加/删除 div

【解决方案3】：

假设您要在按钮添加和删除的基础上添加和删除 div。制作两个按钮 1. 添加按钮 2.删除按钮

创建一个空数组，在你的 jsx 映射数组

Array.map((index,item)=>{
 Return <div key={index} > </div>
})

这将根据数组长度创建 div。

点击按钮调用函数 manageDiv() 在manage div中检查点击的情况（发送按钮名称参数，以便区分哪个按钮被点击）在 manageDiv 函数中，如果添加，则在数组中推送对象，如果单击删除按钮，则进行拼接。

ManageDiv(type) {
Let Array = this.state.Array
If(type == 'add') {
    Array.push({})
}
else
    Array.splice(0, 1)

This.setState({
    Array
})
}

【讨论】：