Reactコンポーネントを再レンダリングする正しい方法は？

Question

私はReact（Angular 1から来て）にはかなり新しく、ややそれを使って遊んでいます。多次元オブジェクトをループしてDOMにバインドするテストスクリプトがあります。

次に、setTimeoutでラップされたオブジェクトに新しい項目を追加します。 ReactDOM.renderをReactコンポーネントを再レンダリングする最善の方法と呼んでいますか？

var items = [ 
    { name: 'Matt', link: 'https://google.com' }, 
    { name: 'Adam', link: 'https://bing.com' }, 
    { name: 'Luke', link: 'https://yahoo.com' }, 
    { name: 'John', link: 'https://apple.com' } 
]; 

var RepeatModule = React.createClass({ 
    getInitialState: function() { 
     return { items: [] } 
    }, 
    render: function() { 

    var listItems = this.props.items.map(function(item) { 
     return (
      <li key={item.name}> 
       <a className='button' href={item.link}>{item.name}</a> 
      </li> 
     ); 
    }); 

    return (
     <div className='menu'> 
      <h3>The List</h3> 
      <ul> 
       {listItems} 
      </ul> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<RepeatModule items={items} />, document.getElementById('react-content')); 

setTimeout(function() { 
    var newline = { name: 'Added item', link: 'https://amazon.com' }; 
    items.push(newline); 
    ReactDOM.render(<RepeatModule items={items} />, document.getElementById('react-content')); 
}, 2000); 

は感謝:)

Answer 1

ラップ親コンポーネント内RepeatModule。項目は州の一部でなければなりません。新しいアイテムを追加するボタンがあります。新しいアイテムをクリックすると、アイテムの詳細が親コンポーネントに渡されます。親コンポーネントは状態を更新する必要があります。

アイテムをアイテムにプッシュしているため、コードが機能しません。あなたはそれを押す前にスライスする必要があります。 ===演算子を使用して小道具/状態の変化をチェックします。

setTimeout(function() { 
    var newline = { name: 'Added item', link: 'https://amazon.com' }; 
    var newItems = items.slice(); 
    newItems.push(newline); 
    ReactDOM.render(<RepeatModule items={newItems} />, document.getElementById('react-content')); 
}, 2000); 

Answer 2

あなたは反応する状態

作業のデモ使用することができます：http://codepen.io/anon/pen/WGyamK

var RepeatModule = React.createClass({ 
    getInitialState: function() { 
     return { items: [ 
      { name: 'Matt', link: 'https://google.com' }, 
      { name: 'Adam', link: 'https://bing.com' }, 
      { name: 'Luke', link: 'https://yahoo.com' }, 
      { name: 'John', link: 'https://apple.com' } 
     ] } 
    }, 
    componentDidMount() { 
     var _this = this 
     setTimeout(function() { 
      var newline = { name: 'Added item', link: 'https://amazon.com' }; 
      _this.setState({items: _this.state.items.concat(newline)}); 
     }, 2000); 

    }, 
    render: function() { 

     var listItems = this.state.items.map(function(item) { 
      return (
       <li key={item.name}> 
        <a className='button' href={item.link}>{item.name}</a> 
       </li> 
      ); 
     }); 

     return (
      <div className='menu'> 
       <h3>The List</h3> 
       <ul> 
        {listItems} 
       </ul> 
      </div> 
     ); 
    } 
}); 
ReactDOM.render(<RepeatModule />, document.getElementById('react-content')); 

言われて、あなたはあなたのための再レンダリングをtrigerringいくつかのライブラリを使用する必要があることを。あなたはAngularから来ているので、最初に、Reactは角度のような全体的なフレームワークではなく、単にMVCのVであることを知る必要があります。

私はレフィックスと組み合わせて反応を使用します。詳細については、https://github.com/reactjs/reduxをご覧ください。

すぐに始めるには、そこにいくつかの良い定型文があります。私はこれが好きですhttps://github.com/davezuko/react-redux-starter-kit

あなたはこれが役に立つと思います。

Answer 3

リアクタは、componentDidMountメソッドで非同期呼び出しを行うことをアドバイスします。 AJAX
経由

ロード初期データがcomponentDidMountでデータをフェッチします。 レスポンスが到着したら、データを状態に保存し、 へのレンダリングをトリガーしてUIを更新します。ここで
https://facebook.github.io/react/tips/initial-ajax.html

デモです：http://codepen.io/PiotrBerebecki/pen/KgZGao

const App = React.createClass({ 
    getInitialState: function() { 
    return { 
     items: [ 
     { name: 'Matt', link: 'https://google.com' }, 
     { name: 'Adam', link: 'https://bing.com' }, 
     { name: 'Luke', link: 'https://yahoo.com' }, 
     { name: 'John', link: 'https://apple.com' } 
     ] 
    }; 
    }, 

    componentDidMount: function() { 
    setTimeout(() => { 
     this.setState({ 
     items: [ 
      ...this.state.items, 
      { name: 'Added item', link: 'https://amazon.com' } 
     ] 
     }); 
    }, 2000); 
    }, 

    render: function() { 
    var listItems = this.state.items.map(function(item) { 
      return (
       <RepeatModule key={item.name} href={item.link} itemName={item.name} /> 
     ); 
    }); 

    return (
     <div> 
     <h3>The List</h3> 
     {listItems} 
     </div> 
    ); 
    } 
}); 


const RepeatModule = React.createClass({ 
    render: function() { 
     return (
      <div className='menu'> 
       <ul> 
       <li> 
        <a className='button' href={this.props.href}>{this.props.itemName}</a> 
       </li> 
       </ul> 
      </div> 
    ); 
    } 
}); 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);