在组件React之间传递数据

Question

我是React的新手，我想将对象数据从一个子组件移动到另一个子组件，这是我的代码：

import React from "react";
import SiteRow from "./SiteRow";
import AlertList from "../Alerts/AlertList";
import data from "../../static/fixtures/data.json";
const SiteList = () => {
return (
<div className="row">
<div className="col-8">
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">Site</th>
<th scope="col">Alerts</th>
<th scope="col">Savings</th>
<th scope="col">Uptime</th>
<th scope="col">Power</th>
</tr>
</thead>
<SiteRow sites={data.sites} />
</table>
</div>
<AlertList />
</div>
);  
};
export default SiteList;

当我点击SiteRow组件中的一行时，必须在AlertList的子组件AlertRow中显示数据，我一直在寻找这个，但我被卡住了，知道吗？

谢谢。

我读过关于React Context的文章，但我没有分享数据的想法。

Answer 1

有几种方法可以做到这一点，

1. 一种方法是在两者的父组件中创建一个状态子组件
2. 第二种方法是初始化React上下文
3. 否则，存在用于全局的外部库，如redux共享状态

Answer 2

最简单的方法是将状态放置在它们的共同祖先中，在本例中为SiteList。

在SiteRow中，您创建了一个回调道具(下面演示中的onSelectSite(，每次单击一行时都会调用它。在SiteList中，您将使用该回调来更新状态(下面演示中的selectedSite(。然后，您将把这样的状态传递给AlertList。

参见工作演示：

const data = {sites: [{site: 'click me aaa'}, {site: 'click me bbb'}]};
const AlertList = ({ site }) => {
return (
<div>
<hr />
AlertList - selected site: {JSON.stringify(site)}
</div>
);
}
const SiteRow = ({ sites, onSelectSite }) => {
return (
<tbody>
{sites.map(s => <tr onClick={e => onSelectSite(s, e)}><td>{s.site}</td></tr>)}
</tbody>
);
}
const SiteList = () => {
const [selectedSite, setSelectedSite] = React.useState(null);
const handleSelectedSite = (site) => {
setSelectedSite(site);
}
return (
<div className="row">
<div className="col-8">
<table className="table table-bordered">
<thead>
<tr>
<th scope="col">Site</th>
<th scope="col">Alerts</th>
<th scope="col">Savings</th>
<th scope="col">Uptime</th>
<th scope="col">Power</th>
</tr>
</thead>
<SiteRow sites={data.sites} onSelectSite={handleSelectedSite} />
</table>
</div>
<AlertList site={selectedSite} />
</div>
);  
};
ReactDOM.createRoot(document.getElementById('app')).render(<SiteList />);

table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
td { color: blue; cursor: pointer; }

<script type="text/javascript" src="//unpkg.com/react@18/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id="app"></div>

如果你有一个很深的组件树。还有其他方法可以简化道具的传递，例如Context或像Redux这样的库。