React组件间传值问题：子组件间数据交互实现方案咨询

对于你这种兄弟组件（SiteRow 和 AlertList）之间的传值需求，最适合新手的方式是状态提升——把共享状态放到它们的共同父组件SiteList里，通过回调和props传递数据，比React Context更直观好上手。

具体步骤如下：

1. 在SiteList中添加状态存储选中的站点数据 #

用React的useState钩子创建状态，用来保存用户点击的SiteRow行对应的站点对象。

2. 给SiteRow传递点击回调函数 #

当用户点击SiteRow里的某一行时，调用这个回调函数，把选中的站点数据传给SiteList，更新状态。

3. 把选中的站点数据传给AlertList #

将SiteList中存储的选中站点数据作为props传给AlertList，AlertList再把数据传给AlertRow展示。

修改后的SiteList代码 #

import React, { useState } from "react";
import SiteRow from "./SiteRow";
import AlertList from "../Alerts/AlertList";
import data from "../../static/fixtures/data.json";

const SiteList = () => {
    // 初始化选中站点状态，默认值设为null
    const [selectedSite, setSelectedSite] = useState(null);

    // 定义回调函数，接收选中的站点数据
    const handleSiteSelect = (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数组和点击回调 */}
            <SiteRow sites={data.sites} onSiteSelect={handleSiteSelect} />
          </table>
        </div>
        {/* 给AlertList传递选中的站点数据 */}
        <AlertList selectedSite={selectedSite} />
      </div>
    );
};

export default SiteList;

SiteRow组件的修改示例 #

需要在渲染每一行的时候绑定点击事件，触发父组件传来的onSiteSelect回调：

import React from "react";

const SiteRow = ({ sites, onSiteSelect }) => {
    return (
        <tbody>
            {sites.map(site => (
                // 给行绑定点击事件，把当前site对象传给回调
                <tr key={site.id} onClick={() => onSiteSelect(site)} style={{ cursor: 'pointer' }}>
                    <td>{site.name}</td>
                    <td>{site.alertsCount}</td>
                    <td>{site.savings}</td>
                    <td>{site.uptime}</td>
                    <td>{site.power}</td>
                </tr>
            ))}
        </tbody>
    );
};

export default SiteRow;

AlertList和AlertRow的修改示例 #

AlertList接收selectedSite，传给AlertRow展示对应告警：

// AlertList.jsx
import React from "react";
import AlertRow from "./AlertRow";

const AlertList = ({ selectedSite }) => {
    // 未选中站点时显示提示
    if (!selectedSite) {
        return <div>请选择一个站点查看告警</div>;
    }

    return (
        <div className="col-4">
            <h3>{selectedSite.name} 的告警</h3>
            {/* 把选中站点的告警数据传给AlertRow */}
            <AlertRow alerts={selectedSite.alerts} />
        </div>
    );
};

export default AlertList;

// AlertRow.jsx
import React from "react";

const AlertRow = ({ alerts }) => {
    return (
        <ul className="list-group">
            {alerts.map(alert => (
                <li key={alert.id} className="list-group-item">
                    <strong>{alert.title}</strong>: {alert.description}
                </li>
            ))}
        </ul>
    );
};

export default AlertRow;

为什么不用React Context？ #

Context适合跨多层组件共享数据的场景（比如用户登录状态、全局主题配置），而你的需求只是兄弟组件之间传值，用父组件做中间层的方式更简单直接，不需要额外理解Context的Provider、Consumer逻辑，先掌握这种基础的状态传递方式，之后再学习Context会更容易。

内容的提问来源于stack exchange，提问作者Guillermo Alfonso Morales