如何解决在这种情况下,我可以在同级组件之间共享数据吗?
有没有一种方法可以在兄弟组件之间共享数据,而无需返回我需要数据的组件?这是一个更好地解释它的示例:
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
中Component2
的一些数据。我发现这样做的唯一方法是将component1
放回component2
内,然后将props
放在那里。
我的意思是
return (
<div>
<p>I am component number 2</p>
<Component1 handleInfo={(info) => handleInfo(info)} />
</div>
是否有一种方法不返回组件,而仍然收到数据抛出props
?我知道我可以用UseContext
和其他方法来做,但是我想知道我是否可以用道具来做。谢谢!
解决方法
您可以做的是在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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。