React - 在组件内动态创建List项

Question

有没有办法将动态li元素添加到我的ul列表中？我想点击按钮添加我的李.这是示例代码

class Component1 extends React.Component {

    constructor() {
        super();
    }

    add() {
        let ul = document.getElementById('mylist');
        let li = document.createElement('li');
        li.appendChild(document.createTextNode({some_variables});
        ul.appendChild(li);
    }
    render() {
        return (
                <a href="#" onClick={() => this.add()}>Add</a>
                <ul id="mylist">
                    /* dynamic list ITEM  */

                </ul>
        );
    }
}

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

当前的函数add()对React不起作用

Answer 1

当使用react时,我们不像通常使用其他库(如jQuery)那样"触摸"DOM.
反应的最佳和核心功能之一是虚拟DOM,协调和差异算法

React构建并维护呈现的UI的内部表示.它包括从组件返回的React元素.这种表示使得React可以避免创建DOM节点并访问超出必要的现有节点,因为这可能比JavaScript对象上的操作慢.有时它被称为"虚拟DOM"

在反应中,您创建呈现/返回jsx(标记)的组件(函数).
您的方案的一个简单示例可能是:

const ListItem = ({ value, onClick }) => (
  <li onClick={onClick}>{value}</li>
);

const List = ({ items, onItemClick }) => (
  <ul>
    {
      items.map((item, i) => <ListItem key={i} value={item} onClick={onItemClick} />)
    }
  </ul>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      fruites: ['Apple', 'Banana', 'Orange']
    };
  }

  onClick = () => {
    const { inputValue, fruites } = this.state;
    if (inputValue) {
      const nextState = [...fruites, inputValue];
      this.setState({ fruites: nextState, inputValue: '' });
    }
  }

  onChange = (e) => this.setState({ inputValue: e.target.value });

  handleItemClick = (e) => {console.log(e.target.innerHTML)}

  render() {
    const { fruites, inputValue } = this.state;
    return (
      <div>
        <input type="text" value={inputValue} onChange={this.onChange} />
        <button onClick={this.onClick}>Add</button>
        <List items={fruites} onItemClick={this.handleItemClick} />
      </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>