Recharts - передать значение dataKey дочернему компоненту

Question

Как я могу передать значение dataKey другому компоненту?У меня есть линейная диаграмма с пользовательской точкой, эта точка требует значения из данных.Как я могу передать ему значение 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

Если вы посмотрите на этот пример , предоставленный Recharts, вы увидите, что если вы передадите элемент React свойству dot Line, оно будет иметь следующие свойстваавтоматически: cx, cy, stroke, payload, value, где cx и cy - это координаты, которые вам нужны для рисования точки, а value - это значение, которое вы ищете.

Вы можете поиграть с их примером JSFiddleчтобы увидеть, как все это работает: https://jsfiddle.net/ps1a6jeu/5/