Làm cách nào để chuyển trạng thái gốc cho các thành phần con của nó?

Question

Tôi mới trong React ES6 và tôi nghĩ rằng tôi đang sửa đổi nhà nước một cách sai lầm. Mã của tôi là như thế này khi tôi đặt nhà nước về thành phần cha mẹ:

class App extends React.Component { 
constuctor(props) { 
    super(props); 
    this.state = {name:"helloworld"}; 
} 
render() { 
    return( 
    <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components 
); 
} 
} 

Vấn đề của tôi là trong thành phần trẻ khác, tôi phải làm điều đó repeatitively, là có một cách khác để làm việc đó? Tôi không có vấn đề với React.createClass, nhưng tôi muốn mã trong es6 vì vậy tôi có vấn đề này.

Answer 1

Nếu bạn muốn vượt qua tình trạng {name: "helloworld"} làm điều đó như thế:

class App extends React.Component { 
constuctor(props) { 
    super(props); 
    this.state = {name:"helloworld"}; 
} 
render() { 
    return( 
    <ChildComponent {...this.state} /> 
); 
} 
} 

và trong thành phần con bạn có thể làm:

<Text>{this.props.name}</Text> 

Nhưng nếu bạn muốn vượt qua các đạo cụ của các thành phần để nó trẻ:

class App extends React.Component { 
    constuctor(props) { 
     super(props); 
     this.state = {name:"helloworld"}; 
    } 
    render() { 
     return( 
     <ChildComponent {...this.props} /> 
    ); 
    } 
    } 

và trong thành phần con bạn có thể làm:

<Text>{this.props.stuff}</Text>//place stuff by any property name in props 

Bây giờ, nếu bạn muốn cập nhật trạng thái của thành phần gốc từ thành phần con, bạn sẽ cần chuyển hàm cho thành phần con:

class App extends React.Component { 
    constuctor(props) { 
     super(props); 
     this.state = {name:"helloworld"}; 
    } 
    update(name){ 
     this.setState({name:name})// or with es6 this.setState({name}) 
    } 
    render() { 
    return( 
     <ChildComponent {...this.props, update: this.update.bind(this)} /> 
    ); 
    } 
    } 

và sau đó trong thành phần con bạn có thể sử dụng này: this.props.update('new name')

CẬP NHẬT

sử dụng constructor es6 hơn và loại bỏ

class App extends React.Component { 
    state = {name:"helloworld"}; 

    // es6 function, will be bind with adding .bind(this) 
    update = name => { 
     this.setState({name:name})// or with es6 this.setState({name}) 
    } 

    render() { 
    // notice that we removed .bind(this) from the update 
    return( 
     <ChildComponent {...this.props, update: this.update} /> 
    ); 
    } 
    } 

Answer 2

nếu bạn muốn gửi toàn bộ trạng thái:

return(<ChildComponent {...this.state} />); 

Nhưng điều này có thể là một ý tưởng tồi :)

chỉnh sửa: trong kịch bản của bạn, điều này sẽ gửi một 'tên' tài sản để thành phần con với giá trị 'helloworld'