React点击列表元素如何在另一个组件中展示对应扩展信息？

实现方案 #

核心思路为状态提升：因为列表组件ListOfData和信息展示组件InfoOfData为兄弟组件，无法直接通信，所以将「当前选中的产品数据」状态放到二者的公共父组件中统一管理。

1. 修改公共父组件（以App.tsx为例，只要是同时渲染ListOfData和InfoOfData的上层组件均可） #

import React, { useState } from 'react'
import ListOfData from './ListOfData'
import InfoOfData from './InfoOfData'

function App() {
  // 定义状态存储当前选中的产品
  const [selectedProduct, setSelectedProduct] = useState(null)

  return (
    <div className="App">
      {/* 把更新选中状态的方法传给列表组件 */}
      <ListOfData onSelect={setSelectedProduct} />
      {/* 把当前选中的产品传给信息展示组件 */}
      <InfoOfData product={selectedProduct} />
    </div>
  )
}

export default App

2. 修改ListOfData.tsx，接收父组件传入的回调并透传给列表项 #

import React from 'react'
import '../css/ListOfData.css'
import ListOfDataElement from "./ListOfDataElement";
import DummyListContent from "./DummyListContent";

// 接收父组件传入的onSelect回调
function ListOfData({ onSelect }) {
    const dataComponent = DummyListContent.map(item => 
      <ListOfDataElement 
        key={item.id} 
        product={item}
        onSelect={onSelect} 
      />
    )

    return (
        <div className="ListOfData_container">
            {dataComponent}
        </div>
    )
}

export default ListOfData

3. 修改ListOfDataElement.tsx，点击时触发回调传入当前产品数据 #

import React from "react";
import '../css/ListOfData.css'

function ListOfDataElement(props: any) {
    return(
        <div 
          className={'ListOfDataElement'} 
          // 点击时调用父组件传入的onSelect，传入当前产品
          onClick={() => props.onSelect(props.product)}
        >
            <h3>{props.product.id} - {props.product.name}<i className={'arrow right'}/></h3>
        </div>
    )
}
export default ListOfDataElement

4. 修改InfoOfData.tsx，接收选中的产品数据，渲染详情组件 #

import React from 'react'
import '../css/InfoOfData.css'
import InfoOfDataElement from './InfoOfDataElement'

// 接收父组件传入的选中产品
function InfoOfData({ product }) {
    return (
        <div className="InfoOfData_container" id="InfoContainer">
            {/* 如果有选中的产品就渲染详情，否则显示提示 */}
            {product ? <InfoOfDataElement product={product} /> : <p>请点击左侧列表项查看详情</p>}
        </div>
        )
}

export default InfoOfData

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