Je suis en train de créer un simple basé sur une grille de l'éditeur pour une structure de données et je vais avoir quelques problèmes conceptuels React.js. Leur documentation n'est pas très utile, donc je suis en espérant que quelqu'un ici peut vous aider.
Tout d'abord, quelle est la bonne façon de transférer de l'état d'un composant externe à l'intérieure d'un composant? Est-il possible d'avoir les modifications de l'état dans l'intérieur de la composante "bulle" à l'extérieur du composant(s)?
Deuxièmement, les deux composantes distinctes de partager des données, de sorte qu'une mutation dans l'un est visible dans l'autre?
Ci-dessous est un exemple simplifié de la sorte de chose que je veux faire (JSFiddle version):
J'ai un company objet contenant un tableau de employee objets. Je veux poser le employee liste modifiable dans un réseau. Quand je clique sur le bouton, je veux voir le résultant company de l'objet, ainsi que toutes les mutations (écrit sur la console).
/** @jsx React.DOM */
var Cell = React.createClass({
getInitialState: function () {
return {data: ""};
},
componentWillMount: function () {
this.setState({data: this.props.data});
},
onChange: function (evt) {
console.log(this.state, evt.target.value);
this.setState({data: evt.target.value});
},
render: function () {
var data = this.props.data;
return <input value={this.state.data} onChange={this.onChange} />
}
});
var Row = React.createClass({
render: function () {
return (<div className="row">
<Cell data={this.props.data.name} />
<Cell data={this.props.data.location} />
<Cell data={this.props.data.phone} />
</div>);
}
});
var Grid = React.createClass({
render: function () {
var rows = this.props.data.map(function (rowData, index) {
return <Row key={index} data={rowData}>Row</Row>;
});
return <div className="table">{rows}</div>;
}
});
var Button = React.createClass({
getInitialState: function () {
return {data: {}}
},
componentWillMount: function () {
this.setState({data: this.props.data});
},
onClick: function () {
console.log(this.state);
},
render: function () {
return <button onClick={this.onClick}>Update</button>;
}
});
var company = {
name: "Innotech",
employees: [
{id: "1", name: "Peter", location: "IT", phone: "555-1212"},
{id: "2", name: "Samir", location: "IT", phone: "555-1213"},
{id: "3", name: "Milton", location: "loading dock", phone: "none"}
]
};
React.renderComponent(
<div><Grid data={company.employees} /><Button data={company} /></div>,
document.getElementById('employees')
);
