내 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"라는 것을 알아야합니다.

나는 redux와 함께 반응을 사용합니다. 자세한 내용은 https://github.com/reactjs/redux을 확인하십시오.

빨리 시작하려면 좋은 상용구 코드가 있습니다. 이게 맘에 들다. https://github.com/davezuko/react-redux-starter-kit

희망이 있으면 유용 할 것입니다.

Answer 3

React docs componentDidMount 메서드에서 비동기 호출을 배치하는 것이 좋습니다. AJAX
통해

로드 된 초기 데이터는 componentDidMount 데이터 반입. 응답이 도착하면 데이터를 상태로 저장하고 에 대한 렌더링을 트리거하여 UI를 업데이트합니다. 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') 
); 

: 여기 https://facebook.github.io/react/tips/initial-ajax.html

는 데모입니다