html - Recharts - 将 dataKey 的值传递给子组件

Question

如何将 dataKey 的值传递给另一个组件？我有一个带有自定义点的折线图，这个点需要数据中的值。如何将数据键的值传递给它？

const data = [
    { name: 'abc', value: '1' },
    { name: 'cde', value: '2',},
    { name: 'fgh', value: '3' }
    ...
];

<LineChart data={data} margin={{ right: 50, left: 50 }}>
    <Tooltip />
    <Line type="monotone" dataKey="value" stroke="black" strokeWidth="1px" dot={<CustomDot name={[[[name dataKey]]]} />} />
</LineChart>

Answer 1

如果你看一下this example由 Recharts 提供，你会看到，如果你将一个 React 元素传递给 Line 的 dot 属性，它将自动具有以下属性:cx， cy, stroke, payload, value，其中cx和cy是你需要画点的坐标，value是您正在寻找的值(value)。

您可以试用他们的 JSFiddle 示例，看看它是如何工作的:https://jsfiddle.net/ps1a6jeu/5/