[英]How can we share a state variables between two React components on the same page?
I have two components within App.js.我在 App.js 中有两个组件。 The main
App
component (that contains a basic form) and a custom TextInput
component.主
App
组件(包含一个基本表单)和一个自定义TextInput
组件。 I understand that ideally, it would be better to have separate files.我理解理想情况下,最好有单独的文件。 However, I am trying to keep this as brief and simple as possible.
但是,我会尽量保持简短和简单。
Anyway, I declare a state variable with const [success, setSuccess] = useState(false);
无论如何,我用
const [success, setSuccess] = useState(false);
声明了一个状态变量const [success, setSuccess] = useState(false);
within the first component and would like to use this within the second component.在第一个组件中,并希望在第二个组件中使用它。 I tried declaring the variable outside of both components to enable sharing, but that didn't work.
我尝试在两个组件之外声明变量以启用共享,但这不起作用。 How should I go about doing this?
我该怎么做呢? I mean normally, I would just export and import, but here, both components are on the same page.
我的意思是通常,我只会导出和导入,但在这里,两个组件都在同一页面上。
To share the state you need to declare the state in the parent component (App in your case) and send it to the child component (TextInput)要共享状态,您需要在父组件(在您的情况下为 App)中声明状态并将其发送到子组件(TextInput)
eg例如
function App() {
const [success, setSuccess] = useState(false);
...
return (
<TextInput success={success} setSuccess={setSuccess} />
);
}
function TextInput({success, setSuccess}) {
// use success/setSuccess from props
}
You will have to pass props from parent(App component) like :您必须从父级(应用程序组件)传递道具,例如:
function App() {
const [success, setSuccess] = useState(false);
return (
<TextInput success={success} />
);
}
and to access it in TextInput component并在 TextInput 组件中访问它
function TextInput(props) {
//Access it using props.success
}
In this case, if you have given a pascal case naming for the text input such as function TextInput(){...}
, then react will consider this as a separate component even if this is defined in the same file.在这种情况下,如果您为文本输入提供了 pascal case 命名,例如
function TextInput(){...}
,那么即使它在同一文件中定义,react 也会将其视为单独的组件。 This is why the state variables of the App
component are not within the scope of TextInput
这就是为什么
App
组件的状态变量不在TextInput
的范围内
You can mitigate this by following either of the following approcahes,您可以通过以下任一方法来缓解这种情况,
function textInput(){
// the state variable 'success' and 'setSuccess' will be normally accessible here
return(
<div>
<input type="text" />
<div>
)
}
//return for the 'App' component
return(
<>
{textInput()}
</>
)
Passing the state as props
to the TextInput
component将状态作为
props
传递给TextInput
组件
If you follow this approach, then you can have the TextInput
component in a separate file as well如果您遵循这种方法,那么您也可以将
TextInput
组件放在一个单独的文件中
//parent 'App' component
function App(){
const [success, setSuccess] = useState(false);
return(
<>
<TextInput success={success} setSuccess={setSuccess}></TextInput>
</>
)
}
function TextInput(props){
const {success, setSuccess} = props;
// In here you can refer success and setSuccess normally as you would even if this is in a separate file
}
Not sure if maybe I am misunderstanding but...不知道我是否理解错了,但是......
//App.js //App.js
function App() {
const [success, setSuccess] = useState(false);
return (
<TextInput success={success} />
<FormComponent success={success} />
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.