Bạn không được phép sử dụng phương thức của thành phần bên ngoài chính thành phần đó (hoặc bằng cách chuyển nó thành một cuộc gọi lại đến một thành phần con). Bạn nên coi đây là phương pháp riêng tư.
Tuy nhiên, bạn có thể sử dụng tính năng Phản ứng được gọi là statics để cung cấp các chức năng mà là có sẵn từ bên ngoài thành phần. Tuy nhiên, chúng nên được coi là các hàm tĩnh của một lớp, và kết quả là chúng không có quyền truy cập vào nội bộ của một cá thể của thành phần của bạn (chẳng hạn như this.props hoặc this.state).
Dưới đây là một ví dụ về một số thiết lập tĩnh cho một thành phần:
var Component = React.createClass({
statics: {
// these functions are available outside the component
renderToBody: function() {
React.renderComponent(
<Component />,
document.body
);
}
},
// cannot access this function outside the component
getHelloWorld: function() {
return 'Hello World!';
},
render: function() {
return (
<div>{this.getHelloWorld()}</div>
);
}
});
Vì vậy, nếu chúng ta gọi là React.renderComponent(Component({}), elem) sau đó các thành phần sẽ trả cho elem nhưng vì sự tĩnh bạn có thể gọi Component.renderToBody() và nó sẽ làm cho các thành phần trực tiếp thành phần <body>.
IE: Các hàm được xác định bên trong đối tượng statics của thành phần có sẵn trực tiếp dưới dạng hàm tĩnh. Tuy nhiên, bạn phải nhớ rằng chúng là static ở chỗ chúng là không phải là một phần của đối tượng thành phần được tạo ra, chúng chỉ là các hàm bạn có thể gọi trên lớp.
Toàn bộ ý tưởng có phản ứng là các thành phần được tự cung cấp càng tốt. Bạn không bao giờ cần phải truy cập vào một hàm thành phần trực tiếp từ bên ngoài một thành phần như những gì bạn nên làm thay vì chỉ thay đổi các đạo cụ cho thành phần và tái render nó để nó, bên trong, có thể thay đổi.
Dưới đây là một ví dụ về điều đó:
var Component = React.createClass({
propTypes: {
// always get in the habbit of using propTypes!
message: React.PropTypes.string.isRequired,
show: React.PropTypes.bool
},
render: function() {
return (
<div style={{display: this.props.show ? 'block' : 'none'}}>
{this.props.message}
</div>
);
}
});
Trong khi bạn có thể đã tạo ra một phương pháp show() trên thành phần thay vì (để bạn có thể làm component.show(true) hoặc component.show(false) để hiển thị/ẩn - bạn thay vì vượt qua nó như một tài sản cho kết quả tương tự.
Calling React.renderComponent(Component({message: 'foo', show: true}), elem) sẽ làm cho rõ ràng, tái rendering với show: false sẽ giấu nó, vv kết quả tương tự thành phần, nhưng với đạo cụ, mà là cách phản ứng.
Cảm ơn bạn rất nhiều Mike, bạn đã giúp tôi rất nhiều! Tôi có thể hỏi câu hỏi cuối cùng không? Theo tôi hiểu tôi có thể gắn kết nhiều thành phần vào một nút? Vì vậy, tôi có thể giải quyết chúng? Ví dụ: nếu tôi đặt 3 thành phần hợp lý và sau đó muốn ẩn thứ hai. – KaronatoR
Bạn chỉ có thể gắn kết một thành phần trên một phần tử html đã cho. Tuy nhiên, một trong những cách tốt nhất để đối phó với nhiều thành phần là gắn kết một thành phần cha và sau đó chỉ cần thực hiện mọi thứ khác mà bạn cần một đứa con của cha mẹ đó. Nhưng có, bạn có thể lặp và gắn kết nhiều phiên bản của cùng một thành phần. Trong phản ứng, điều này đơn giản như việc lặp và đẩy các thành phần vào một mảng, sau đó kết xuất mảng bên trong hàm 'render' của một thành phần như'