Блог

Я довольно новичок в 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);
  

Очень признателен 🙂

Документы React рекомендуют размещать асинхронные вызовы в 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')
);
  

Оберните RepeatМодуль в родительский компонент. Элементы должны быть частью состояния. Есть кнопка для добавления нового элемента. При нажатии на новый элемент передайте сведения об элементе родительскому компоненту. Родительский компонент должен обновить состояние.

Ваш код не будет работать, потому что вы перемещаете элемент в элементы. Вы должны нарезать его, прежде чем нажимать на него. React проверяет наличие реквизитов / изменение состояния с помощью оператора === .

 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);
  

Вы могли бы использовать состояние реакции

рабочая демонстрация: 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'));
  

При этом вы должны использовать некоторую библиотеку, запускающую повторный запуск для вас. Вы пришли из Angular, поэтому, во-первых, вам нужно знать, что React — это не целый фреймворк, подобный angular, а просто «V в MVC».

Я использую react в сочетании с redux. Проверьте https://github.com/reactjs/redux для большего.

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

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