React实现仅展开点击行数据：解决全量展开问题

你当前的问题是用了一个全局的fullText状态变量，所有表格行共享这个状态，所以点击任何一行都会触发所有行的展开/收起。要实现仅操作点击的行，有两种可行的解决思路：

思路一：将状态下沉到行级子组件 #

把每行的文本切换逻辑拆成独立的子组件，让每个子组件自己维护展开状态，这样各行的状态互不干扰。

示例代码：

class TextToggleRow extends React.Component {
  state = { fullText: false };

  toggleText = () => {
    this.setState(prev => ({ fullText: !prev.fullText }));
  };

  render() {
    const { data } = this.props;
    return (
      <>
        <div 
          onClick={this.toggleText} 
          className="text-primary cursor-pointer font-size-14 mt-2 px-2"
        >
          {this.state.fullText ? 'Short Text' : 'Full Text'}
        </div>
        {this.state.fullText && <span>{data?.caption}</span>}
      </>
    );
  }
}

// 父组件中渲染表格行时使用这个子组件
{tableData.map(item => (
  <tr key={item.id}>
    <td>
      <TextToggleRow data={item} />
    </td>
  </tr>
))}

思路二：在父组件中维护展开行的ID集合 #

如果需要在父组件统一管理所有行的展开状态（比如批量操作需求），可以用一个对象存储各行列的展开状态，键为行ID，值为布尔值。

示例代码：

// 父组件初始化状态
this.state = { expandedRows: {} };

// 切换指定行的展开状态
toggleRow = rowId => {
  this.setState(prev => ({
    expandedRows: {
      ...prev.expandedRows,
      [rowId]: !prev.expandedRows[rowId]
    }
  }));
};

// 渲染单行时的逻辑
{
  const rowId = props.data?.id;
  const isExpanded = this.state.expandedRows[rowId] || false;
  return (
    <>
      <div 
        onClick={() => this.toggleRow(rowId)} 
        className="text-primary cursor-pointer font-size-14 mt-2 px-2"
        key={rowId}
      >
        {isExpanded ? 'Short Text' : 'Full Text'}
      </div>
      {isExpanded && <span>{props.data?.caption}</span>}
    </>
  )
}

两种思路各有适用场景：子组件维护状态更解耦，适合简单的行内交互；父组件维护状态则方便全局控制，适合有批量操作需求的场景。

内容的提问来源于stack exchange，提问作者Mert Kahramantürk