React-在组件内部动态创建列表项

小编典典

React-在组件内部动态创建列表项

reactjs

有什么方法可以将动态li元素添加到我的ul列表中？我想li通过单击按钮添加我的。这是示例代码

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上不起作用

阅读 346

2020-07-22

共1个答案

小编典典

使用react时，我们不会像平常使用其他库（如jQuery）那样“接触” DOM。
react的最佳和核心功能之一是虚拟DOM，调节和差异算法

React构建并维护呈现的UI的内部表示。它包括您从组件返回的React元素。这种表示方式使React可以避免创建DOM节点和不必要地访问现有节点，因为这样做可能比对JavaScript对象的操作要慢。有时它被称为“虚拟DOM”

在react中，您创建呈现/返回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>

2020-07-22