나는 그들이이 "React Context"에 대해 무슨 말을하려고하는지 모르겠다. 그들은 나에게 그리스어로 말하고있다. 그러나 내가 한 방법은 다음과 같다.
동일한 페이지에서 함수 간 값 전달
생성자에서 setter를 바인딩합니다.
this.setSomeVariable = this.setSomeVariable.bind(this);
그런 다음 생성자 바로 아래에 함수를 선언합니다.
setSomeVariable(propertyTextToAdd) {
this.setState({
myProperty: propertyTextToAdd
});
}
설정하고 싶을 때 this.setSomeVariable("some value");
(당신은 도망 칠 수도 있습니다 this.state.myProperty = "some value";)
당신이 그것을 얻고 싶을 때, 전화하십시오 var myProp = this.state.myProperty;
사용 alert(myProp);하면 some value.
페이지 / 구성 요소간에 값을 전달하는 추가 스캐 폴딩 방법
모델을 this(기술적으로 this.stores) 할당 할 수 있으므로 다음을 사용하여 참조 할 수 있습니다 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
이 폴더 stores를 yourForm.jsx.
그런 다음 다른 페이지에서이 작업을 수행 할 수 있습니다.
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
다음 this.state.someGlobalVariable과 같은 기능을 사용하여 다른 구성 요소를 설정 한 경우 :
setSomeVariable(propertyTextToAdd) {
this.setState({
myGlobalVariable: propertyTextToAdd
});
}
생성자에서 다음을 사용하여 바인딩합니다.
this.setSomeVariable = this.setSomeVariable.bind(this);
의 값은 위에 표시된 코드 propertyTextToAdd를 SomePage사용하여 표시됩니다 .
Redux또는Flux라이브러리를 사용할 수 있습니다. 모든 구성 요소를 쉽게 통과 할 수 있습니다