Вставка элемента в дочерний элемент REACT

Question

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

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

Специальный класс диаграммы:

class ChartWithInfo extends React.Component {
    constructor(props){
        super(props);
        this.chartWrapperElement = React.createRef();        
    } 

    componentDidMount() {
        const infoInsertion = (
            <div>
               <IconButton/>
            </div>
        )
        this.chartWrapperElement.current.insertBefore(infoInsertion, this.chartWrapperElement.current.firstChild);
    }

    render() {
        return (
            <GenericChart
                variables={this.props.variables}
                ref={this.chartWrapperElement}
            />
        );
    }
}

Общий класс диаграммы

export default class EmbeddedChart extends PureComponent {
    // Random methods //
    render() {
        return (
            <div ref={this.props.ref} id={'chartDiv'}>
                Chart
            </div>
        );
    }
}

Ожидаемый результат по существу будет:

<div id='chartDiv'>
   <IconButton/>
</div>


What is the most react way to do this? Am I missing something with refs?

Answer 1

React предназначен для компонентов, и если вы следуете разделению интересов и архитектуры компонентов. Вы можете разделить все свои компоненты и отдельные компоненты многократного использования. Создайте свой компонент кнопки отдельно и импортируйте его куда угодно. Свяжите свои события и бизнес-логику соответственно.