在这种情况下，我可以在兄弟组件之间共享数据吗？

Question

有没有一种方法可以在同级组件之间共享数据而无需返回我需要数据的组件？这是一个更好地解释它的例子：

import React from "react";
import "./App.css";
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          <h1>Home page</h1>
          <Component1 />
          <Component2 />
        </div>
      </header>
    </div>
  );
}

const Component1 = (props) => {
  const importantInfo = "secret-info";
  if (props.handleInfo) {
    props.handleInfo(importantInfo);
  }
  return (
    <div>
      <p>I am component number 1</p>
    </div>
  );
};

const Component2 = () => {
  const handleInfo = (info) => {
    console.log(info);
  };
  return (
    <div>
      <p>I am component number 2</p>
      <Component1 handleInfo={(info) => handleInfo(info)} />
    </div>
  );
};
export default App;

我想在Component2 中使用来自Component1 的一些数据。我发现这样做的唯一方法是在component2 中返回component1 并将props 放在那里。

我的意思是：

return (
    <div>
      <p>I am component number 2</p>
      <Component1 handleInfo={(info) => handleInfo(info)} />
    </div>

有没有办法不返回组件仍然接收数据 throw props？我知道我可以用UseContext 和其他方法做到这一点，但我想知道我是否可以用道具做到这一点。谢谢！

Answer 1

您可以在App.js 中创建一个新状态，如下所示：

function App() {
   const [commonInfo, setCommonInfo] = useState('information')

   return // rest of the code
}

然后在两个组件中通过props 将其传递为：

return (
  <div className="App">
    <header className="App-header">
      <div>
        <h1>Home page</h1>
        <Component1 commonInfo={commonInfo} setCommonInfo={setCommonInfo} />
        <Component2 commonInfo={commonInfo} setCommonInfo={setCommonInfo} />
      </div>
    </header>
  </div>
);

因此，您可以从组件中的props 解构如下：

// and also in Component2
const Component1 = (props) => {
   const { commonInfo, setCommonInfo } = props

   // rest
}