我在显示导入到 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中的开发工具接收它。是因为我没有直接将它绑定(bind)到 DOM 元素吗？我想既然我的主文件被绑定(bind)到一个元素，它对我的组件来说也会是相同的吗？我想我不确定如何正确绑定(bind)它？抱歉造成困惑，我是 React.js 新手
最佳答案
根据评论，我认为您的意思是您的 HelloMessage 组件正在显示，但您的 Navigation 组件未显示，所以我会回答这个问题。
当你这样做时:
ReactDOM.render(<HelloMessage />, document.getElementById('root'));
...您只是告诉 React 将 HelloMessage 组件从其 render 方法返回的任何内容绑定(bind)到该 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>
);
}
}
关于javascript - ReactJS - 导入组件未显示在 DOM 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34841250/