@BratSinot

Как добавить строку в таблицу в ReactJS?

Доброго времени суток!

Решил я немного изучить ReacJS. Пока пробую создать что-то вроде "динамических таблиц", с простой функциональностью -- добавить, удалить строку.

Проект создал через react-create-app (дабы вручную не настраивать упаковщики, Babel и т.д.).

Основами более менее овладел и получилось нарисовать таблицу:
https://jsfiddle.net/69z2wepo/63374/

Начал искать информацию по "динамическим вставкам" (по англоязычным ресурсам), но ничего полезного не нашел. Где-то что-то про ref'ы, где-то что-то про состояния, примеры и способы очень разрознены по реализациям, да и вообще по ним крайне сложно что-то понять по ответам (если они вообще есть).
Так-же проблем добавляет то, что я пишу на ES6 (через наследование React.Component), а практически все примеры, которые показывали нужную мне функциональность написаны через React.createClass, например:
https://github.com/eajitesh/Hello-ReactJS/blob/mas...

В общем, вопрос такой: Как правильно добавить строку в таблицу (равно как и любой элемент в какое-нибудь место в дереве)?
  • Вопрос задан
  • 2198 просмотров
Решения вопроса 1
Если вы хотите что-то изменить в текущем компоненте, то используйте состояние (setState).

Если вы хотите изменить дочерний компонент, меняйте состояние текущего (setState) и передавайте измененные данные из состояния (state) дочернему компоненту через props.

В вашем примере, корневой компонент - Table, в который вы передаете свойства (props): head_names и rows. Если вы хотите сделать возможность добавлять новую строку в Table, то вам следует сделать контейнер, в который поместить Table и кнопку (или другой элемент) для добавления новых строк. В состояние (state) контейнера нужно добавит head_names и rows, на основе которых и будет создаваться таблица.

class TableManagement extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      head_names: ['qwe0', 'qwe1'],
      rows: [
        [1, 2],
        [3, 4]
      ]
    };
  }  

  AddRow() {
    let newRows = this.state.rows;
    newRows.push([0, 0]);
    this.setState({rows: newRows});
  }

  render() {
    return (
      <div>
        <Table head={this.state.head_names} rows={this.state.rows} />
        <hr />
        <button onClick={ this.AddRow.bind(this) }>Add row</button>
      </div>
    );
  }
}

class Table extends React.Component {
  render() {
    return (
      <table>
        <thead>
          {this.genHead()}
        </thead>
        <tbody>
          {this.genRow()}
        </tbody>
      </table>
    );
  }

  genHead() {
    var head = this.props.head;

    return head.map(function(v, i) {
      return (
        <th key={'th' + i}>
          {v}
        </th>
      );
    });
  }

  genRow() {
    var rows = this.props.rows;

    return rows.map(function(v, i) {
      var tmp = v.map(function(v2, j) {
        return (
          <td key={'td' + i + '_' + j}>
            {v2}
          </td>
        );
      });

      return (
        <tr key={'tr' + i}>
          {tmp}
        </tr>
      )
    });
  }
}

ReactDOM.render(
  <TableManagement />,
  document.getElementById('root')
);

https://jsfiddle.net/m11x34fp/

В процессе разработки, важно определиться, кто будет тупым, а кто умным :-)

Тупые (простые) компоненты - это компоненты, которые ничего не делают, просто принимают свойства и рисуются.

Умные компоненты способны управлять состоянием, как своим, так и передавать его своим тупым отпрыскам потомкам :-)

Если компонентов много, и особенно, если много вложенных компонентов, то следует хорошо продумать роль каждого компонента. Один умный компонент с множеством тупых вложенных компонентов - это самый простой вариант. Если дети тоже будут умными и должны будут общаться с компонентами своего уровня (братьями и сестрами) или верхнего уровня (дедушками, бабушками и выше), то организовать взаимодействие между компонентами будет сложно, будут конфликты, лишние обновления, в худшем случае зацикливание. Для решения проблем таких масштабов можно использования библиотеки управления состоянием, такие как Redux, Flux и т.п.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iv07rybkin
@iv07rybkin
Разбираюсь в технике
Вам следует поподробнее почитать руководство для ReacJS
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы