Обычно в примерах React показывают как созданный компонент рендерит один раз в один узел, как правило с id="root".
У меня другая задача - в html станицу нужно вставить несколько раз, в разные места, один и тот же React компонент, с разными параметрами.
Меня интересует правильный пример того как это нужно делать.
Пока я сделал так (пример упрощенный до предела):
https://codesandbox.io/embed/l21j84vjmq
html
<div class="root" feed='{"name":"Maks", "age":33}'></div>
<div class="root" feed='{"name":"Petr", "age":22}'></div>
<div class="root" feed='{"name":"Boxy", "age":27}'></div>
точка входа
const elements = document.getElementsByClassName("root");
for (var i = 0; i < elements.length; i++) {
const feed = elements[i].getAttribute("feed");
render(<ShowSomeInfo key={i} feed={feed} />, elements[i]);
}
jsx компонент
class ShowSomeInfo extends React.Component {
constructor(props) {
super(props);
const user = JSON.parse(this.props.feed);
this.state = { name: user.name, age: user.age };
}
onChange = e => {
this.setState({ age: e.target.value });
};
render() {
return (
<div>
<h2>{this.state.name}</h2>
<h2>{this.state.age}</h2>
<input type="number" value={this.state.age} onChange={this.onChange} />
</div>
);
}
}
В данном случае все работает как надо, но меня волнует - не будет ли такая система тормозить; насколько это вообще правильно и принято так делать?
