Question

我正在为vscode开发一个插件，并且已经导入了一个组件。该组件正在使用新的react context API。

组件如下。

import React from 'react';
import propTypes from 'prop-types';

import AppContext from '../context/app-context.js';

import 'semantic-ui-css/semantic.min.css';

class Visualizer extends React.Component {
    /**
     * Constructor
     * @param {Object} props props object
     */
    constructor(props) {
        super(props);

        this.state = {
            oasJson: {},
            isError: {
                state: false,
                message: '',
            },
            actionState: {
                state: '',
                message: ''
            }
        };

    }


    /**
     * Render Method
     * @returns {React.ReactElement} DOM element
     */
    render() {
        const { oasJson } = this.state;
        return (
            <AppContext .Provider
                value={{
                    oasJson: oasJson,
                }}
            >
                <OasResources
                    resObj={paths}
                >
                </OasResources>
            </AppContext .Provider>
        );
    }
}

export default Visualizer ;

我使用以下方法对此进行渲染

function renderEditor(target){
     ReactDOM.render(<Visualizer oasJson={json} />, target);
}

，在vscode插件所需的renderer.ts文件中调用。在正常的reactjs应用程序中使用该组件时，该组件可以完美呈现而没有任何流程，但是在vscode插件中使用该组件时，出现以下错误。

未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

如果我删除AppContext并仅返回随机div，则组件呈现良好。我的上下文文件如下。

import React from 'react';

const AppContext = React.createContext({
    oasJson: {},
});

export default AppContext ;

我在这里做错了什么。我将React: 16.2.0和ReactDom: 16.2.0用作dep

未捕获的错误：元素类型无效：应为字符串-React Context API

0 个答案: