React - コンポーネント内のListアイテムの動的作成

Question

動的リスト要素を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')); 

（）我々は通常、（jQueryのような）他のライブラリと同じようにDOM「感動」ではありません反応し使用している場合

Answer 1

を反応させるのでは動作しませんです。機能は、仮想DOMで反応最良とコアの
一方、Reconciliation & diffing algorithm

レンダリング UIの内部表現を構築し、維持し反応します。これには、コンポーネントから返されるReact要素が含まれます。 この表現により、ReactはDOMノードの作成を避け、必要以上に既存のノードにアクセスすることで、JavaScriptオブジェクトの操作 よりも遅くなる可能性があります。

実際には、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>