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

Question

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

无论如何，我用const [success, setSuccess] = useState(false);声明了一个状态变量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

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

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

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

并在 TextInput 组件中访问它

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

Answer 3

在这种情况下，如果您为文本输入提供了 pascal case 命名，例如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 4

不知道我是否理解错了，但是......

//App.js

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

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