React - 在组件内动态创建List项 [英] React - Dynamic creation of List item inside component

问题描述

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

Is any way to add dynamical li element into my ul list ? I'd like add my li by clicking the button. Here is example code

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上工作

Ofcourse current function add() doesn't work on React

推荐答案

当使用react时，我们并没有触及DOM，就像我们通常对其他库一样（比如jQuery） ）。$
反应的最佳和核心功能之一是虚拟DOM，和解& diffing algorithm

When using react we are not "touching" the DOM as we usually do with other libraries (like jQuery).
One of the best and core features of react is the virtual DOM, the Reconciliation & diffing algorithm

React构建并维护一个inte渲染的
UI的最终表示形式。它包括从组件返回的React元素。
这种表示使得React可以避免创建DOM节点并访问超出必要的
现有节点，因为这可能比JavaScript对象上的操作
慢。有时它被称为虚拟DOM

React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM"

在反应中你创建了渲染/返回<$ c的组件（函数） $ c> jsx （标记）。

您的方案的一个简单示例可能是：

In react you create components (functions) that renders / returns a jsx (markup).
A simple example to your scenario could be:

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>

这篇关于React - 在组件内动态创建List项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！