Javascript ReactJS-导入组件不会显示在DOM中_Javascript_Reactjs

Javascript ReactJS-导入组件不会显示在DOM中

javascript reactjs

Javascript ReactJS-导入组件不会显示在DOM中,javascript,reactjs,Javascript,Reactjs,我在显示要导入home.jsx文件的组件时遇到问题。没有输出错误我的组件文件（header.jsx）： //Import Dependencies. import React, { Component } from 'react'; //Import Styles. import styles from './header.scss'; //Export Modules. export default class Navigation extends Component { re

我在显示要导入home.jsx文件的组件时遇到问题。没有输出错误

我的组件文件（header.jsx）：

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './header.scss';

//Export Modules.
export default

class Navigation extends Component {
    render(){
        return (
            <header>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </header>
        );
    }
}

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './home.scss';

//Import Components.
import { Navigation } from '../../components/header.jsx'

//Export Modules.
export default

class HelloMessage extends Component {
    render(){
        return (
            <div>
                <p className="hello">Hello World!</p>
            </div>
        );
    }
}

//导入依赖项。
从“React”导入React，{Component}；
//导入样式。
从“/header.scss”导入样式；
//导出模块。
导出默认值
类导航扩展了组件{
render（）{
返回(



);
}
}

我的主文件（home.jsx）：

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './header.scss';

//Export Modules.
export default

class Navigation extends Component {
    render(){
        return (
            <header>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </header>
        );
    }
}

//Import Dependencies.
import React, { Component } from 'react';

//Import Styles.
import styles from './home.scss';

//Import Components.
import { Navigation } from '../../components/header.jsx'

//Export Modules.
export default

class HelloMessage extends Component {
    render(){
        return (
            <div>
                <p className="hello">Hello World!</p>
            </div>
        );
    }
}

//导入依赖项。
从“React”导入React，{Component}；
//导入样式。
从“/home.scss”导入样式；
//导入组件。
从“../../components/header.jsx”导入{Navigation}
//导出模块。
导出默认值
类HelloMessage扩展组件{
render（）{
返回(
世界你好
);
}
}

我正在像这样渲染DOM（home.js）：

从“React”导入React；
从“react dom”导入react dom；
从“/home.jsx”导入HelloMessage；
ReactDOM.render（，document.getElementById（'root'））；

HTML：

<html>
  <head>
    <title>Sample App</title>
  </head>
  <body>
    <div id='root'></div>
    <script src="bundle.js"></script>
  </body>
</html>


示例应用程序

我知道路径是正确的。我在组件文件中添加了一个console.log，并通过chrome中的开发工具接收到它。是因为我没有直接将它绑定到DOM元素吗？我想既然我的主文件被绑定到了一个元素，那么我的组件也会被绑定到这个元素吗？我想我不知道怎样才能把它绑好？很抱歉造成混淆，我是React.js的新手。根据评论，我想你是说你的

HelloMessage

组件正在显示，但是你的

导航

组件没有显示，所以我会回答这个问题

执行此操作时：

ReactDOM.render(<HelloMessage />, document.getElementById('root'));

你的HTML是什么样子的？这可能意味着没有id为

root

的元素。我已经准备好了id。将显示我在home.jsx中创建的HelloMessage元素。但是没有导航组件。我认为这是因为没有将导航组件呈现给实际的DOM元素。不过，我不知道如何组织它。@JoshSpears您可以做的是使用HelloMessage组件作为应用程序的包装器（并将其重命名为类似于app/root的名称）——一般来说，我建议使用单个包装器w。子组件。然后将导航导入到app/root组件（现在称为HelloMessage）和每个其他子组件，它们将被渲染，因为app/root组件是通过

ReactDom.render（）

渲染的。这非常有意义！我只是不知道你可以像那样把组件传给其他组件。但是，我尝试了此操作并收到一个呈现错误：

Uncaught invalition:元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：undefined。检查“HelloMessage”的呈现方法。

Hm这可能意味着

导航组件有问题。您确定要根据目录结构从正确的位置导入它吗？是的，如果我在header.jsx中添加一个简单的控制台.log
，我会看到它正在输出。哦，这可能是因为您在header.jsx中使用导出默认值进行默认导出，而不是命名导出。尝试导入导航，但不使用home.jsx
中的括号，如下所示：从“../../components/header.jsx”导入导航，效果很好！但是我不明白。。我想当你导入自定义模块时，你必须把它们用花括号括起来？