Правильный способ ретрансляции моего компонента React?

Question

Я довольно новый, чтобы реагировать (исходящий от 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 не является целым каркасом, как угловатый, а просто «V в MVC».

Я использую реакцию в сочетании с сокращением. Отъезд https://github.com/reactjs/redux для получения дополнительной информации.

Есть несколько хороших кодов, чтобы начать работу быстро. Мне нравится https://github.com/davezuko/react-redux-starter-kit

Надеюсь, вы найдете это полезным.

Answer 3

React docs рекомендует разместить асинхронные вызовы в методе componentDidMount.

нагрузки Исходные данные через AJAX
Выборка данных в componentDidMount. Когда приходит ответ , сохраните данные в состоянии, вызывая визуализацию до , обновите свой интерфейс.
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') 
);