React中无法通过props在表格与Highcharts折线图组件间传值求助

问题根因 #

你遇到的props.cont为undefined的问题核心是两个原因：

1. 状态存储位置错误：你将选中值cont的状态存在了Table组件内部，这个状态只能在Table组件内部访问，和渲染折线图的Tab组件没有层级关联，无法直接传递给下层的Timeseries组件。
2. 没有实际传递props：你在Tab组件中渲染Timeseries时写的是<Timeseries />，没有传入任何属性，自然读取不到cont的值。

另外你的代码还隐含一个递归渲染风险：你自定义的组件命名为Table，render时又调用了同名的UI库Table组件，会触发无限递归报错，建议先将自定义组件改名，比如改为CompanyTable。

修复方案 #

方案1：状态提升（适合组件层级较浅的场景） #

把cont状态提到Table和Tab的共同父组件中管理，再逐层透传：

1. 共同父组件代码示例：

// Table和Tab的共同上层父组件
import { useState } from 'react'
import CompanyTable from './CompanyTable'
import Tab from './Tab'

export default function ParentComponent() {
  const [selectedCont, setSelectedCont] = useState("")
  return (
    <>
      <CompanyTable changeSelected={setSelectedCont} />
      <Tab cont={selectedCont} />
    </>
  )
}

2. 修改Table组件，删除内部state，使用父组件传入的更新方法：

export default function CompanyTable({ changeSelected }) {
  const changeState = (x) => {
    changeSelected(x);
    alert(x);
  };

  return (
    <Table
      thead={['#', 'Company Name', 'Avg Count (in M)']}
      tbody={[
        {
          values: [1, 'ABC Inc', '2939,110']
        },
        {
          active: true,
          values: [
            2,
            <div onClick={() => changeState('XYZ')}>XYZ</div>,
            '1268,147'
          ]
        }
      ]}
    />
  );
}

3. 修改Tab组件，接收cont参数并传给Timeseries：

import React from 'react';
import Timeseries from './Timeseries';

export default function Tab({ cont }) {
  const { tab } = React.useContext(Context);
  return (
    <React.Fragment>
      <Row h='70' pb='1'>
        <Col pl='1'><Timeseries cont={cont} /></Col>
      </Row>
    </React.Fragment>
  );
};

方案2：使用已有Context（适合组件层级深的场景） #

你已经在Tab组件中使用了Context，可以直接把cont状态存入公共Context中：

1. 在你的Context定义位置添加cont状态和更新方法
2. Table组件引入Context，点击单元格时调用Context中的更新方法修改cont
3. Timeseries组件直接从Context读取cont值，不需要透传props

额外优化：解决图表不更新的问题 #

你当前的lineChartOptions是定义在组件顶层的，不会随cont变化自动更新，需要用useMemo包裹配置，添加cont为依赖项，触发图表重载：

import { useMemo } from 'react'

export default function Timeseries(props) {
  const lineChartOptions = useMemo(() => ({
    // 原有图表配置保持不变
    series: getdata(props.cont) // 将cont传给你获取数据的方法，过滤对应公司的数据
  }), [props.cont])

  // 剩余渲染逻辑不变
}

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