Phản hồi cách cập nhật trạng thái của một thành phần khác?

Question

Tôi khá mới để phản ứng, cố gắng làm cho một số thành phần hoạt động. Tôi có

ObjectA:React.createClass({ 
     propTypes: { 
      ... 

     }, 

     getInitialState: function() { 
      return { 
       myState: null 
      } 
     }, 

     updateMyState: function(value) { 
      this.setState({ 
       myState: value 
      }) 
     } 

     render: function() { 
      return (<div className="my-class">'hello' +{this.state.myState}</div>); 
      } 
    }); 

    ObjectB:React.createClass({ 
      propTypes: { 
       ... 

      }, 

      render: function() { 
       return (<div className="my-class"><ObjectA/> 

      </div>); 
      } 
     }); 

Tôi muốn cập nhật trạng thái của ObjectA từ ObjectB. Làm thế nào tôi có thể trong ObjectB gọi phương thức cập nhật MyState của ObjectA? Cảm ơn!

Answer 1

Ý tưởng cơ bản của React là luồng dữ liệu một chiều. Điều đó có nghĩa rằng dữ liệu chỉ được chia sẻ xuống từ một thành phần tổ tiên cho con của nó thông qua các thuộc tính của trẻ. Chúng tôi để lại Flux như kiến ​​trúc và sự kiện phát ra khỏi phương trình cho ví dụ đơn giản này vì nó không cần thiết chút nào.

Cách duy nhất để thay đổi trạng thái của thành phần từ bên ngoài đang thay đổi các đạo cụ mà nó nhận được trong phương thức kết xuất của cha. vì vậy myState thực sự sẽ sống trong ObjectB và được trao cho ObjectA như là tài sản. Trong ví dụ của bạn sẽ trông giống như sau:

ObjectA:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    render: function() { 
     return (<div className="my-class">'hello' +{ this.props.name }</div>); 
     } 
}); 

ObjectB:React.createClass({ 
    propTypes: { 
     ... 

    }, 

    getInitialState: function() { 
     return { 
      name: null 
     } 
    }, 

    onNameChange: function(newName) { 
     this.setState({ name: newName }) 
    }, 

    render: function() { 
     return (
      <div className="my-class"> 
       <ObjectA name={ this.state.name } /> 
      </div> 
     ); 
    } 
});