Question

我在制作动态新div时遇到了麻烦。任何人都可以帮我这样做。

这是我的div。

java -jar ${jarLocation} -role webdriver -hub ${hubRegisterURL} -port ${port} -log ${gridNodeLog} -maxSession 1

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

Answer 1

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

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

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

Answer 2

假设你想在按钮添加和删除的基础上添加和删除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
})
}

Answer 3

您可以通过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>

反应|如何添加像行一样的动态新div

3 个答案: