Tôi không biết họ đang cố gắng nói gì với thứ "Bối cảnh phản ứng" này - họ đang nói tiếng Hy Lạp với tôi, nhưng đây là cách tôi đã làm điều đó:
Mang các giá trị giữa các chức năng, trên cùng một trang
Trong phương thức khởi tạo của bạn, hãy ràng buộc trình thiết lập của bạn:
this.setSomeVariable = this.setSomeVariable.bind(this);
Sau đó khai báo một hàm ngay bên dưới hàm tạo của bạn:
setSomeVariable(propertyTextToAdd) {
this.setState({
myProperty: propertyTextToAdd
});
}
Khi bạn muốn đặt nó, hãy gọi this.setSomeVariable("some value");
(Bạn thậm chí có thể thoát khỏi this.state.myProperty = "some value";
)
Khi bạn muốn lấy nó, hãy gọi var myProp = this.state.myProperty;
Sử dụng alert(myProp);
sẽ cung cấp cho bạn some value
.
Phương pháp giàn giáo bổ sung để mang các giá trị trên các trang / thành phần
Bạn có thể gán một mô hình cho this
(về mặt kỹ thuật this.stores
), vì vậy bạn có thể tham chiếu nó với this.state
:
import Reflux from 'reflux'
import Actions from '~/actions/actions`
class YourForm extends Reflux.Store
{
constructor()
{
super();
this.state = {
someGlobalVariable: '',
};
this.listenables = Actions;
this.baseState = {
someGlobalVariable: '',
};
}
onUpdateFields(name, value) {
this.setState({
[name]: value,
});
}
onResetFields() {
this.setState({
someGlobalVariable: '',
});
}
}
const reqformdata = new YourForm
export default reqformdata
Lưu nó vào một thư mục có tên stores
là yourForm.jsx
.
Sau đó, bạn có thể làm điều này trong một trang khác:
import React from 'react'
import Reflux from 'reflux'
import {Form} from 'reactstrap'
import YourForm from '~/stores/yourForm.jsx'
Reflux.defineReact(React)
class SomePage extends Reflux.Component {
constructor(props) {
super(props);
this.state = {
someLocalVariable: '',
}
this.stores = [
YourForm,
]
}
render() {
const myVar = this.state.someGlobalVariable;
return (
<Form>
<div>{myVar}</div>
</Form>
)
}
}
export default SomePage
Nếu bạn đã đặt this.state.someGlobalVariable
trong một thành phần khác bằng một hàm như:
setSomeVariable(propertyTextToAdd) {
this.setState({
myGlobalVariable: propertyTextToAdd
});
}
mà bạn liên kết trong hàm tạo với:
this.setSomeVariable = this.setSomeVariable.bind(this);
giá trị trong propertyTextToAdd
sẽ được hiển thị SomePage
bằng cách sử dụng mã hiển thị ở trên.
Redux
hoặcFlux
thư viện có thể xử lý dữ liệu hoặc trạng thái trên toàn cầu. và bạn có thể vượt qua nó một cách dễ dàng thông qua tất cả các thành phần của bạn