Question

我在显示我导入到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>
        );
    }
}

我的主要文件（home.jsx）：

//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>
        );
    }
}

我正在向DOM渲染（home.js）：

import React from 'react';
import ReactDOM from 'react-dom';
import HelloMessage from './home.jsx';


ReactDOM.render(<HelloMessage />, 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的新手

Answer 1

根据评论，我认为你说你的HelloMessage组件正在显示，但你的Navigation组件没有显示，所以我＆＃39我会回答这个问题。

执行此操作时：

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

...您只是告诉React绑定HelloMessage组件从其render方法返回到该DOM元素的任何内容。即使您要导入Navigation组件，也不会实际渲染它，因此React并不真正知道它存在。为了呈现您的Navigation组件，您需要在home.jsx中执行此操作：

// 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

// Note that now `Navigation` is included in the render output
class HelloMessage extends Component {
    render(){
        return (
            <div>
                <Navigation />
                <p className="hello">Hello World!</p>
            </div>
        );
    }
}

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

1 个答案: