在反应的次序呈现的,假设我有丙名称输入分量= A,B,C. 它们在顺序呈现反应。组件未在状态改变
render() {
return(
<Input name="A" />
<Input name="B" />
<Input name="C" />
);
}
然后我的状态改变ç和甲的顺序第一ç然后A. 组分甲和Ç重新呈现的顺序第一甲然后Ç。它们没有在状态变化的顺序呈现(ç然后甲)
参见下面给出的代码段。 我发现了把其形式为C
设定状态 B的
设定状态
的
设定状态渲染的
渲染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
@YuryTarabanko添加代码片段请检查 – PranavPinarayi