React中实现Box组件向List页面的MainSpace传递数据

这个问题是React里很常见的子组件间数据联动场景，核心思路是把共享状态（选中的Box数据）提升到父组件List中，让它作为中间层协调两个子组件的数据传递。下面是具体的落地方案：

1. 改造List组件：添加状态管理与回调函数 #

我们需要在List的state里维护selectedData来存储被点击的Box数据；同时给每个Box传递一个回调函数，让Box点击时把自身数据回传给List更新状态。另外遍历数组更推荐用map（for...in更适合遍历对象）：

class List extends Component {
  constructor(props) {
    super(props);
    // 初始化选中状态为null
    this.state = {
      selectedData: null
    };
  }

  // 定义接收Box数据的回调函数
  handleBoxClick = (data) => {
    this.setState({ selectedData: data });
    // 先打印确认数据是否正确接收
    console.log("选中的Box数据：", data);
  };

  render() {
    // 用map生成Box组件，传递data和回调函数
    const boxList = this.props.data.map((item, index) => (
      <Box
        key={index}
        data={item}
        onBoxClick={this.handleBoxClick}
      />
    ));

    return (
      <div>
        {boxList}
        {/* 将选中的数据传给MainSpace */}
        <MainSpace data={this.state.selectedData} />
      </div>
    );
  }
}

2. 修改Box组件：触发父组件的回调 #

Box不需要自己维护状态，只需要在按钮点击时调用父组件传过来的onBoxClick，把自身的props.data传回去即可。这里用箭头函数包裹能方便地绑定当前数据：

class Box extends Component {
  render() {
    return (
      <div>
        <span>{this.props.data.text}</span>
        {/* 点击按钮时把当前Box的data传给父组件 */}
        <button onClick={() => this.props.onBoxClick(this.props.data)}>
          查看详情
        </button>
      </div>
    );
  }
}

3. 优化MainSpace组件：处理初始无数据的情况 #

因为初始时selectedData是null，我们需要加个判断避免渲染出错：

class MainSpace extends Component {
  render() {
    // 未选中任何Box时显示提示
    if (!this.props.data) {
      return <div>请点击一个Box查看内容</div>;
    }
    // 选中后渲染图片
    return (
      <div>
        <img src={this.props.data.image} alt={this.props.data.text} />
      </div>
    );
  }
}

方案逻辑说明 #

• React是单向数据流，子组件不能直接修改父组件状态，只能通过回调函数通知父组件更新
• 把共享状态放在共同父组件中，能让Box和MainSpace共享同一数据源，保证数据一致性
• 彻底避免了每个Box里渲染MainSpace的冗余问题，MainSpace只渲染一次，随props变化自动更新

这样修改后，点击任意Box的按钮，对应数据就会同步到MainSpace里，完全满足你的需求~

内容的提问来源于stack exchange，提问作者Loko