javascript - React'te bir öğe nasıl oluşturulur ve alt öğeleri eklemek için onun ref'i nasıl kullanılır?

React'te bir üst bileşende bir HTML öğesi oluşturmaya çalışıyorum ve o bileşenin div'ine bir alt bileşen içinde erişmek istiyorum, böylece alt bileşenden div'e yeni öğeler ekleyebilirim.

Birçok denemeden sonra child constructor'da props.canvasDivElement.current=null'u düzeltemedim.

Bunu REF kullanarak ve refs olmadan yapmayı denedim... Şimdiye kadar şansım olmadı.

Herhangi bir fikir?

Üst bileşen şöyle görünüyor:

import React from "react";
import ReactViewer from "../ReactViewer/ReactViewer";

export default class CanvasWrapper extends React.Component {
    private _divElement: React.RefObject<HTMLDivElement>;

    constructor(props: any) {
        super(props);
        this._divElement = React.createRef<HTMLDivElement>();
    }

    render() {
        return (
            <div>
                <ReactViewer canvasDivElement={this._divElement}></ReactViewer>
            </div>
        );
    }
}

Alt bileşen:

import React from "react";

type ReactViewerState = {
};

type ReactViewerProps = {
    canvasDivElement: React.RefObject<HTMLDivElement>;

};

    export default class ReactViewer extends React.Component<ReactViewerProps, ReactViewerState> {
        constructor(props: ReactViewerProps, state: ReactViewerState) {
            super(props, state);
            const newElement = document.createElement('span');
            newElement.innerText = 'element';
            props.canvasDivElement.current!.appendChild(newElement); //current is null
        }

        render() {
            return (
                <div ref={this.props.canvasDivElement} />
            );
        }
    }

Cevap #1

Acemilik hatası, element render edilene kadar her zaman null olacaktır. Aşağıdaki satırı componentDidMount olayına değiştirdim:

    props.canvasDivElement.current!.appendChild(newElement);

Cevap #2

Görünüşe göre, React'in sağladığı diğer araçlarla çözülmesi gereken bir problemi çözmek için React'in temel ilkelerini atlatmaya çalışıyorsunuz. React'te bir çocuk ile bir ebeveyn arasında iletişim kurmanın yolu, çocuğa bir geri arama işlevi (callback) geçirmektir. Ardından çocuk, ebeveynin çocuklarını güncellemesi için sinyal vermek amacıyla bu geri aramayı çağırır.

İlgili makaleler