Question

我正在使用带有React的图表设置各种折线图。为了保持外观的一致性，我创建了一个名为MyLineChart的组件，该组件接受一个对象，其中包含格式和所需数据，如下所示：

const lineChartInfo = { // Pass in the required data, and some formatting info
  data: {
    values: this.state.userData,
    dataKey: "x",
    connectNulls: true,
  },
  xaxis: {
    dataKey: 'date',
  },
  yaxis: {
    domain: [1,7],
  }
}

要将图表添加到我的应用程序中，然后调用：

<MyLineChart chartData={lineChartInfo} />

在MyLineChart组件中，我具有以下渲染组件：

render () {

        let chartData = this.props.chartData.data
        let chartXAxis = this.props.chartData.xaxis
        let chartYAxis = this.props.chartData.yaxis

        return (

            <LineChart data={chartData.values}>
                
                <XAxis 
                    dataKey     = {chartXAxis.dataKey} />
                <YAxis
                    .... ? this is where the issue is ..... />
                <Line 
                    stroke={STYLES.CHARTBLUE} 
                    strokeWidth={2}
                    dataKey={chartData.dataKey}
                    type="monotone"  />

              </LineChart>
        )
    }

对于YAxis，如果域在lineChartInfo对象中，我想传递该域，否则我想传递一个默认值。我试图这样做：

<YAxis
   { chartYAxis.domain ? `domain = {chartYAxis.domain}` : null } />

并这样：

<YAxis { if (chartYAxis.domain) domain = {chartYAxis.domain} } />

`，$ {等的各种组合，但是无论我做什么，都会出现错误。该错误显示“正在期待...”

我要实现的目标是可能的吗？我知道我可以将整个<YAxis>括在大括号中，但是我有一些类似的设置，所以我希望能够分别处理它们。

Answer 1

您还可以传递动态道具。

const yAxisProps = {
  domain: chartYAxis.domain || null
}
<YAxis {{ ...yAxisProps }} />

Answer 2

如果您根据条件要发送不同的道具，则可以尝试以下方式：

<YAxis domain = { chartYAxis.domain ? chartYAxis.domain : null } />

如果仅在某些条件为真/假时才必须通过道具，则应尝试：

<YAxis domain = { chartYAxis.domain || null } />

如何有条件地将道具传递给React组件？

2 个答案: