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

Question

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

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

Answer 1

在这种情况下，如果您为文本输入指定了一个帕斯卡大小写命名，例如 function TextInput(){...} ，那么即使在同一个文件中定义，react 也会将其视为一个单独的组件。这就是为什么App组件的状态变量不在TextInput范围内的原因

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

• 使文本输入成为返回 JSX 的普通函数

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 2

要共享状态，您需要在父组件（在您的情况下为 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 3

您必须从父（应用程序组件）传递道具，例如：

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

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

并在 TextInput 组件中访问它

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

Answer 4

不知道是不是我理解错了，但是……

//App.js

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

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