父组件中不渲染子组件，如何在行点击时为其设置Props？

嘿，完全不用Redux就能搞定这个需求！咱们用React自带的状态管理就可以轻松实现，而且能完美满足你“点击后再渲染子组件并传值”的要求，我给你一步步拆解：

核心思路 #

React的视图是由状态驱动的，所以我们只需要在父组件里维护一个「选中行数据」的状态，点击表格行时更新这个状态，再根据状态来决定是否渲染子组件并传递props就行。

具体实现步骤 #

1. 在父组件中添加状态 #

首先在父组件里声明一个状态，用来存储用户点击的行数据，初始值设为null，这样一开始子组件就不会渲染：

const [selectedRowData, setSelectedRowData] = useState(null);

2. 改造行点击回调函数 #

你之前直接在onRowClick里返回组件的写法是无效的，因为事件回调的返回值不会被React渲染。咱们改成更新状态的逻辑：

const handleRowClick = (event) => {
  // 拿到当前点击行对应的数据
  const clickedRowData = props.data.data[event.index];
  // 更新父组件的状态
  setSelectedRowData(clickedRowData);
};

3. 根据状态渲染子组件 #

在父组件的JSX里，通过判断状态是否存在，来决定是否渲染子组件并传递数据：

{selectedRowData && <ChildComponent data={selectedRowData} />}

完整代码示例 #

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
// 假设你的表格组件是YourTableComponent
import YourTableComponent from './YourTableComponent';

const ParentComponent = (props) => {
  const [selectedRowData, setSelectedRowData] = useState(null);

  const handleRowClick = (event) => {
    const clickedRowData = props.data.data[event.index];
    setSelectedRowData(clickedRowData);
  };

  return (
    <div className="parent-container">
      {/* 渲染表格，绑定改造后的点击回调 */}
      <YourTableComponent 
        data={props.data.data} 
        onRowClick={handleRowClick} 
      />

      {/* 只有点击行后，selectedRowData有值了才会渲染子组件 */}
      {selectedRowData && (
        <ChildComponent data={selectedRowData} />
      )}
    </div>
  );
};

export default ParentComponent;

为什么这个方案可行？ #

• 点击行时更新父组件状态，React会自动触发父组件重新渲染
• 当selectedRowData从null变成具体数据时，条件渲染的逻辑会生效，子组件被首次渲染并接收data props
• 如果切换点击不同的行，状态更新后子组件会自动接收新的props并重新渲染，完全符合你的需求

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