Cách truy cập trạng thái của một thành phần từ một thành phần khác

Question

Làm cách nào để truy cập trạng thái của một thành phần trong một thành phần khác? Dưới đây là mã của tôi và tôi đang cố gắng truy cập trạng thái của thành phần a trong thành phần b.

var a = React.createClass({ 
    getInitialState: function() { 
     return { 
      first: "1" 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

var b = React.createClass({ 
    getInitialState: function() { 
     return { 
      second: a.state.first 
     }; 
    }, 

    render: function() { 
     // Render HTML here. 
    } 
}); 

Nhưng tôi không nhận được gì cả.

Answer 1

Nếu hai thành phần cần quyền truy cập vào cùng một trạng thái, chúng sẽ có tổ tiên chung nơi lưu giữ trạng thái.

Vì vậy, thành phần A là phụ huynh của B và C. Thành phần A có trạng thái và chuyển xuống dưới dạng đạo cụ cho B và C. Nếu bạn muốn thay đổi trạng thái từ B, bạn chuyển xuống chức năng gọi lại một chỗ dựa.

Answer 2

Ngay cả khi bạn cố gắng thực hiện theo cách này, đó không phải là phương pháp chính xác để truy cập vào state. Tốt hơn để có một thành phần cha mẹ có con là a và b. ParentComponent sẽ duy trì state và chuyển nó làm đạo cụ cho trẻ em.

Ví dụ,

var ParentComponent = React.createClass({ 
    getInitialState : function() { 
    return { 
     first: 1, 
    } 
    } 

    changeFirst: function(newValue) { 
    this.setState({ 
     first: newValue, 
    }); 
    } 

    render: function() { 
    return (
    <a first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    <b first={this.state.first} changeFirst={this.changeFirst.bind(this)} /> 
    ) 
} 
} 

Bây giờ trong con bạn compoenents a và b, truy cập first biến sử dụng this.props.first. Khi bạn muốn thay đổi giá trị của first, hãy gọi this.props.changeFirst() chức năng của ParentComponent. Điều này sẽ thay đổi giá trị và do đó sẽ được phản ánh ở cả hai trẻ em a và b.

Tôi viết phần a đây, b sẽ tương tự:

var a = React.createClass({ 

    render: function() { 
    var first = this.props.first; // access first anywhere using this.props.first in child 
    // render JSX 
    } 
} 

Answer 3

tôi sẽ đề nghị bạn sử dụng một người quản lý nhà nước như Redux (yêu thích cá nhân), MobX trào ngược, vv để quản lý trạng thái của bạn.

Cách thức hoạt động này là chúng cho phép bạn chứa tất cả trạng thái được chia sẻ trong một lưu trữ trạng thái (được gọi là cửa hàng) và bất kỳ thành phần nào cần quyền truy cập vào một phần của trạng thái được chia sẻ đó, nó sẽ chỉ lấy nó từ cửa hàng.

Có vẻ như rất khó để bắt đầu nhưng khi bạn vượt qua những thử thách nhỏ, hãy lấy 2 hoặc 3 "wtf". Nó trở nên dễ dàng hơn.

Hãy xem ở đây: http://redux.js.org/

EDIT: Redux là tốt nhưng mã boilerplate thực sự là một tắt ... cho những người bạn đang tìm kiếm một đơn giản hơn, huyền diệu hơn (điều này có thể là tốt và xấu) giải pháp sử dụng mobx: https://mobx.js.org/