Если вы хотите что-то изменить в текущем компоненте, то используйте состояние (
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 и т.п.
