React中的嵌入式子组件未定义

Question

我有以下父组件：

nrow(subset(etitanic, sex == "male" & survived == 1)) / nrow(etitanic)
#[1] 0.1290631

在父内部有一个名为ChildComponent的组件，如下所示：

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import _ from "lodash";

import  ChildComponent from "./ChildComponent";

class ParentComponent extends Component {
      constructor(props) {
        super(props);
        this.state = { 
        };

  }

  render() {
    return (
      <div>
      I'm at Parent
       <ChildComponent/>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {    }
 }


export default connect(mapStateToProps, null)(ParentComponent);

当我尝试添加子组件时，我不断收到此错误：

但如果我点击继续，页面会恢复正常。我不明白子组件是如何定义的。它只是嵌入式，不包含任何道具。

更新： 我不再收到错误了，但是当我打开这个特定的组件时，我注意到我的页面变成了空白。我会做更多的故障排除。

Answer 1

我尝试了你的代码，它对我来说很好。我的想法可能是你的条目文件是什么样的？或文件结构？如果您愿意，可以尝试以下语法为父和子 - 它也是这样的：

子：

const mapStateToProps = () => {
  return {}
}

const ConnectedChildComponent = connect(
  mapStateToProps,
  {})(ChildComponent)

export default ConnectedChildComponent;

家长：

const mapStateToProps = () => {
  return {}
}

const ConnectedParentComponent = connect(
  mapStateToProps,
  {})(ParentComponent)

export default ConnectedParentComponent;

Answer 2

在您的ParentComponent更改中：

import  ChildComponent from "./ChildComponent";

到

import  ChildComponent from "./ChildComponent.jsx";

即。添加缺少的“.jsx”扩展名。您的代码很可能默认将导入确定为“.js”文件，而实际上它是“.jsx”文件。