react.js - 新手入门：react 组合组件过程中遇到的问题

问题描述

问 题

    
ReactDOMInvalidARIAHook.js:76 Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
at ReactDOMInvalidARIAHook.js:76
at index.js:330
at index.js:330
  ​

编辑器：sublime ，react最新版本，webpack编译未发现问题。
主要组合三个组件想实现评论的系统，两个子组件添加到了父组件当中，
但是，当在本地服务器上查看的时候在控制台中出现了上述问题，求大佬解决一波，求react的github上面并没有找到相关的ISSUE，google也没有找到确定的答案，所以现在表示一脸懵逼。

子组件1

import  React from 'React';

class CommentForm  extends  React.Component {
    render() {
        return (
            <form>
            <div >
            <input type="text" placeholder="姓名"/>
            </div>
            <div >
            <textarea placeholder="评论"></textarea>
            </div>
            <Button type="submit">
            添加评论
            </Button>
            </form>
            );
    }
}
export {CommentForm as default};

子组件2

import React from 'React';

class CommentList extends  React.Component {
    render() {
        return (<div>评论列表</div>);
            }
}
export {CommentList as default};

父组件

import React from 'react';
import ComponentList from "./ComponentList";
import ComponentForm from "./ComponentForm";
class MessageBox  extends  React.Component {
    render() {
        return (
            <div>
            <h1>评论</h1>
        <ComponentList/>
        <ComponentForm/> 
        </div>
        );
    }
}
export {MessageBox as default};

入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import MesssageBox from './component/MessageBox.js';
ReactDOM.render(<MesssageBox />, document.getElementById('app'));

解决方案

是我自己傻X了在父组件当中import的时候子组件的名字错了，所以出现了这种情况。

这篇关于react.js - 新手入门：react 组合组件过程中遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！