Question

请参阅此示例：https://codepen.io/anon/pen/wjowbq?editors=0011您可以拖动输入框以更改值。

  render()
  {
      var self = this;
      var onChangeValue = (val)=>{
          value = val;//value is a global variable.
          self.setState({});
      };
      var Box = ()=>{
           return <NumberBox step = {1} value={value} onChangeValue={onChangeValue}/>
      };

    return <div>
        <Box/>
        <NumberBox step = {1} value={value} onChangeValue={onChangeValue}/>
    </div>;
  }

请参阅class Application中的代码，第一个NumberBox位于无状态组件Box内。如果你拖动它，它将被卸载。

但第二个工作正常。唯一的区别是NumberBox是否属于无状态组件。

Answer 1

你的无状态组件应该在类Component的外面，所以它可以接收道具。检查此代码，

const Box = ({ value, onChangeValue}) => 
       <NumberBox 
          step = {1} 
          value={value} 
          onChangeValue={onChangeValue}
        />

https://codepen.io/gopinathkaliappan/pen/Peboxe

React：为什么setState导致卸载无状态组件中的组件？

1 个答案: