Блог

Есть ли способ обмениваться данными между родственными компонентами без необходимости возврата компонента, из которого мне нужны данные? вот пример, который лучше объясняет это:

 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;
  

Я хочу использовать некоторые данные из Component1 in Component2 . Единственный способ, который я нашел для этого, состоял в том, чтобы вернуть component1 inside component2 и поместить props туда.

Я имею в виду это:

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

Есть ли способ не возвращать компонент и по-прежнему получать данные props ? Я знаю, что могу сделать это с UseContext помощью и другими методами, но я хочу знать, могу ли я сделать это с помощью props. Спасибо!

Что вы можете сделать, так это создать новое 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
}