时间戳

首页 > 解决方案 > 我们如何在 React 中创建动态元素

javascript - 我们如何在 React 中创建动态元素

问题描述

请问我如何在 ReactJs 中做到这一点。可以直接在反应中操纵dom，还是有一种操纵dom的反应方式。我在网上搜索过，仍然找不到正确的信息。谢谢

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
document.body.appendChild(x);
}
</script>

标签： javascriptreactjs

解决方案

class App extends React.Component{
constructor(props){
super(props);
  this.state = {input: []}
  this.addItem = this.addItem.bind(this)
}
  addItem(){
  const input = this.state.input;
    const item = <input type="text" value="Hello World!" />
    this.setState({input : input.concat(item)})
  }
  render(){
  return(
  <div>
    {this.state.input}
    <br/>
    <button onClick={this.addItem}>Try it</button>
    </div>
  )
  }
}

ReactDOM.render(<App />, document.getElementById("container"));
<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="container"></div>

推荐阅读