Question

我正在尝试将道具传递到下面的不同字段以填充图表。但是，当我尝试渲染时，我从React得到这个错误：

Parsing error: Unexpected token, expected ","

这是我的代码：

function BarChart(props) {
        return (
            <Bar
                data={{
                    labels: [{props.chartTitle}],
                    datasets: [
                        {
                            label: {props.timeFrames},
                            backgroundColor: {props.chartBGColor},
                            data: {props.data}
                        }
                    ]
                }}
            />
        )
}
export default BarChart;

当我传递像这样的道具时，我没有得到错误。我只是无法正确显示图表。

function BarChart(props) {
            return (
                <Bar
                    data={props.data}
                />
            )
    }
    export default BarChart;

Answer 1

围绕props值的大括号无效。您需要删除它们，或者如果打算将它们用作对象，则添加键：

function BarChart(props) {
  return (
    <Bar
      data={{
        labels: [props.chartTitle],
        datasets: [
          {
            label: props.timeFrames,
            backgroundColor: props.chartBGColor,
            data: props.data
          }
        ]
      }}
    />
  );
}

将道具传递给嵌套对象-React.js

1 个答案: