我们如何在同一页面上的两个 React 组件之间共享状态变量？

Question

我在 App.js 中有两个组件。主要 App 组件（包含基本表单）和自定义 TextInput 组件。我理解理想情况下，最好有单独的文件。但是，我尽量保持简短。

无论如何，我在第一个组件中用 const [success, setSuccess] = useState(false); 声明了一个状态变量，并想在第二个组件中使用它。我尝试在两个组件之外声明变量以启用共享，但这没有用。我应该怎么做呢？我的意思是通常情况下，我只会导出和导入，但在这里，两个组件都在同一页上。

Answer 1

要共享状态，您需要在父组件（在您的情况下为 App）中声明状态并将其发送到子组件（TextInput）

例如

function App() {
  const [success, setSuccess] = useState(false);

  ...

  return (
    <TextInput success={success} setSuccess={setSuccess} />
  );
}

function TextInput({success, setSuccess}) {
  // use success/setSuccess from props
}

Answer 2

您必须从父级（App 组件）传递道具，例如：

function App() {
  const [success, setSuccess] = useState(false);

  return (
    <TextInput success={success}  />
  );
}

并在 TextInput 组件中访问它

function TextInput(props) {
//Access it using props.success
}

Answer 3

在这种情况下，如果您为文本输入提供了 pascal 大小写命名，例如 function TextInput(){...} ，那么 React 将把它视为一个单独的组件，即使它是在同一个文件中定义的。这就是为什么App组件的状态变量不在TextInput

范围内的原因

您可以通过以下任一方法来缓解这种情况，

使文本输入成为returnsJSX

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()}
   </>
)

将状态作为 props 传递给 TextInput 组件

如果您采用这种方法，那么您也可以将 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
}

Answer 4

不确定是不是我误会了但是...

//App.js

function App() {
  const [success, setSuccess] = useState(false);

  return (
    <TextInput success={success}  />
    <FormComponent success={success} /> 
  );
}

我们如何在同一页面上的两个 React 组件之间共享状态变量？

How can we share a state variables between two React components on the same page?

jsx

reactjs

react-component