Присоединение к компоненту

Question

Я пытаюсь создать компонент многократного использования диаграммы, но я не могу обернуть вокруг него мозг.

Идея заключается в том, чтобы повторно использовать следующий SVG с помощью реакции (давайте назовем его «Топоры»), вместе с некоторыми функциональными возможностями и государства, как ширина и высота, данные → отображения координат и так далее:

<svg width={...} height={...}> 
    <g ref="area" transform={...}> 
     {chartElements} 
    </g> 
    <g ref="xAxis">...</g> 
    <g ref="yAxis">...</g> 
</svg> 

Тогда Я бы использовал этот SVG и состояние для нескольких компонентов диаграммы.

способов сделать это может быть

1. Make Топоры компонент, используйте this.props.children вместо chartElements, и определить компонент диаграммы следующим образом:

   render: function() { 
       return (
        <Axes ref="axes" {...this.props}> 
        {this.props.data.map(function(d) { 
         return <rect x={this.refs.axes.state.xMap(d)} /> 
        })} 
        </Axes> 
       ) 
   } 
   

   Но это потребуется доступ к Опоры и состояние осей, которые мы не можем получить во время рендеринга.

2. Оберните функциональность в mixin и измените метод рендеринга на метод wrapAxes(chartElements) mixin, который возвращает выше фрагмента.

   Это перемешивается состояние осей и диаграмм, и требует особого внимания, поскольку каждая карта должна позвонить wrapAxes на его возвращаемом значении

3. Проходит компонент в качестве реквизита, который затем получить передается состояние/реквизит на рендеринг? Возможно ли это?

4. ???

Я просто не знаю, как подойти к этому.

Answer 1

Я использую d3 вместе с React сделать это, но this code может ответить на ваш вопрос