无法在反应中使用道具在组件之间传递值？答案

【问题标题】：Unable to pass the value between components using props in react?无法在反应中使用道具在组件之间传递值？
【发布时间】：2021-09-14 05:19:02
【问题描述】：

我是新来的反应。我的问题很简单——我有 2 个组件——表格和 highcharts 折线图。我想要一个选项，用户可以单击表格单元格，它会相应地更改/重新加载折线图中的数据。

我尝试使用道具将点击的值传递给另一个组件，但不知何故它不起作用。我关注了几篇文章，但不知何故没有任何效果，可能是因为我是新手，不确定我到底需要寻找什么（状态/道具/上下文/钩子）。

有人可以看看并指导我哪里出错了吗？

组件 1：

export default function Table() {
    const [state, setstate] = useState({cont:""})

    const changeState = (x) => {
      setstate({cont:x});
      alert(x)  //  Alert is working fine
    };

  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']
      }]} /></>);

}

组件 2：

export default function Timeseries(props) {
  console.log(props.cont)   // Getting undefined here
  const lineChartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Count '
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },

    legend: {
      layout: 'horizontal',
      align: 'center',
      verticalAlign: 'bottom'
    },
    plotOptions: {
      series: {}
    },
    tooltip: {
      split: true,
      valueSuffix: ' millions'
    },
    series: getdata()

  };


  return (
    <Card>
      <CardHeader> <span>{props.cont}</span></CardHeader>
      <CardBody>
        <div id='chart-container' className='w-100 h-100'>
          <SpectrumChart
            containerProps={{ style: { height: '100%', width: '100%' } }}
            // colorPalette="twelveColor"
            options={lineChartOptions}
          />
        </div>
      </CardBody>
    </Card>
  );
};

编辑：

这就是我渲染图表的方式

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

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

【问题讨论】：

你渲染图表的部分在哪里？
你是如何将道具传递给 Timeseries 的？我只能看到 Table 组件
@MorKadosh 添加了我正在使用 Timeseries 的组件的详细信息
@Ashish，你的意思是我如何在 Timeseries 组件中导入它？

标签： javascript reactjs highcharts react-hooks react-props

【解决方案1】：

您似乎没有将任何道具从父组件传递给子组件，

在 ReactJS 中使用 Props 有一些规则和限制，

首先要了解的是，Props 只能从父组件传递给子组件，反之则不行。

在您的组件 2 中，您未定义的原因是 Props 从未从父组件传递到组件中。

而且，如果我假设 props 已通过，那么在这种情况下，你就错了。你的初始状态是一个对象，所以你必须这样称呼它

export default function Timeseries(props) {

  console.log(props.state.cont)   // If the state was passed from the parent, then this will log the state to console.


  const lineChartOptions = { 
     ...

【讨论】：