从父组件道具设置状态

Question

有没有一种方法来设置一个Component的state与Props的Component从Parent Component?

export default class SomeComp extends Component { 
    constructor(props) { 
     super(props); 

     this.state = someProps; // <-- I need the props to be the state of the Component 
    } 


    render() { 
     const { someProps } = this.props; 
     ... 
    } 
} 

接收或者，我可以写一个函数，像

export default class SomeComp extends Component { 
    constructor(props) { 
     super(props); 

    } 

    _setProps = (someProps) => { 
      this.State = someProps; 
    } 

    render() { 
     const { someProps } = this.props; 
     this._setProps(someProps); 
     ... 
    } 
} 

Answer 1

由于Mayank舒克拉提到的，它是不好的做法，存储在一个孩子的状态父道具，从而管理孩子中的状态。

将道具传递给孩子的整个想法是，你不需要关心孩子的状态，因为这一切都是从父母那里流下来的。

子组件应该只关心它们的状态。

你应该做什么而不是做什么（以及什么是良好的反应练习）是在父组件中拥有状态并将事件处理程序传递给将改变父项状态的子项。

// in parent 
class MyParentComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     data: someData; 
    }; 
    } 

    handleChange(data) { 
    this.setState(data); 
    } 

    render() { 
    return (
     <MyChildComponent 
     data={this.state.data} 
     handleChange={this.handleChange} 
     /> 
    ); 
    } 
} 



class MyChildComponent extends React.Component { 
    // this is going to update the data in parent 
    // and trickle it back down to the child 
    this.props.handleChange({ foo: 'bar' }); 
} 

Answer 2

建议将孩子们的状态保留在父组件中。所以parent.state最终将包含children部分，其中的孩子状态可以存储在唯一的ID下。

this.state = { 
    title: 'Some title', 
    // other local stateful attributes 
    children:{ 
     kidId1:{ 
      kidAttr1:' 'value' 
     }, 
     .... 
     kidId100:{ 
      kidAttr1:' 'value' 
     } 
    } 
};