Question

我用一个引用从组件中复制了100％的组件（在它起作用的地方）。该代码使用React.createRef方法创建引用，然后在该引用中插入一个节点。如果导入插件，则完全相同的代码有效，但如果尝试自己编写，则无效：

import * as React from 'react';

import {EditorState} from 'prosemirror-state';
import {EditorView} from 'prosemirror-view';
import {options} from '@aeaton/react-prosemirror-config-default';


interface CodeEditorProps {
    attributes?: any;
    nodeViews?: any;
}

export default class CodeEditor extends React.Component<CodeEditorProps, void> {
    editorRef: React.RefObject<HTMLDivElement>;
    view: EditorView;

    constructor(props) {
        super(props);

        this.editorRef = React.createRef();

        this.view = new EditorView(null);
    }

    componentDidMount() {
        const node = this.editorRef.current;

        // ERROR: Uncaught TypeError: node.appendChild is not a function
        node.appendChild(this.view.dom);
    }

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

有什么想法我在这里做错了吗？

Answer 1

您正在创建editorRef，但是它没有指向任何HTML节点，因为您没有在任何地方进行设置。

您需要在<div ref={this.editorRef} />函数中执行类似render()的操作。

或者，您可以使用'@aeaton/react-prosemirror'中的编辑器，因为您已经使用this demo导入了其中的一部分，如source code here所示。

React ref appendChild不是函数

1 个答案: