從父組件道具設置狀態

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' 
     } 
    } 
};