においては、反応状態の変化の順序でレンダリングされていない、私はA、B、C それらは反応。成分は
render() {
return(
<Input name="A" />
<Input name="B" />
<Input name="C" />
);
}
次いで順序でレンダリングされ、私は状態を変更=プロパ名前の入力コンポーネントを有していると仮定Cとために最初C次いでA. 成分とCため最初次いでCでレンダリング再。それらは、状態変化の順序でレンダリングされていない(C次いで)
下記のコードスニペットを参照してください。 Iは
のB
セット状態のC
セット状態の
セット状態として置くうちB
のレンダリングのレンダリング見出さ
レンダリングのC
class Input extends React.Component { \t componentWillMount() { \t \t \t this.props.addInput(this); \t } state = { \t error: false } check() { console.log("set state of", this.props.name) this.setState({ error: true }) } render() { \t console.log("Render of", this.props.name) return ( <input /> ); } } class Hello extends React.Component { constructor(props) { super(props); this.inputs = {}; } addInput(component) { this.inputs[component.props.name] = component; console.log(this.inputs); } checkAll() { const inputs = this.inputs; Object.keys(inputs).reverse().forEach(name => { inputs[name].check() }); } render() { return ( \t <div> <Input addInput={(c) => this.addInput(c)} name="A"/> <Input addInput={(c) => this.addInput(c)} name="B"/> <Input addInput={(c) => this.addInput(c)} name="C"/> <button onClick={() => this.checkAll()}>click here</button> </div> ); } } ReactDOM.render( <Hello initialName="World"/>, document.getElementById('container') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
問題を再現するには、関連するコード部分を含める必要があります。 –
こんにちは私は、反応成分のレンダリングの順序について知りたいだけです。 – PranavPinarayi
@ YuriTarabankoコードスニペットを追加してください。 – PranavPinarayi