-3

在反应中，假设我有道具名称 = A、B、C 的 Input 组件。它们按顺序呈现

render() {
   return(
      <Input name="A" />
      <Input name="B" />
      <Input name="C" />
   );
}

然后我按照先C再A的顺序更改C和A的状态。 组件A和C按先A然后C的顺序重新呈现。它们不是按状态变化的顺序呈现的（C然后A）

请参阅下面给出的代码片段。我发现输出为

设置 C 的状态

设置 B 的状态

设置 A 的状态

A的渲染

B的渲染

C的渲染 

class Input extends React.Component {
  
  
	componentWillMount() {
			this.props.addInput(this);
	}
  
  state = {
  	error: false
   }
   
   check() {
   console.log("set state of", this.props.name)
    this.setState({
      error: true
    })
   }

  render() {
  	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 (
    	<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>

4

1 回答 1

1

这就是 JSX 默认的工作方式。

如果您想按最后状态更改的顺序呈现组件，则必须将所有组件放入一个数组或拥有一个集合，componentName: componentInstance同时在您可以修改每个组件的值，然后按日期值对集合或数组进行排序。componentName: lastUpdated{ componentName: string, lastUpdated: Date }lastUpdatedcomponentName: componentInstance

然后就.map在 JSX 中。

于 2017-08-14T06:12:53.933 回答