ReactJS - 導入組件不顯示在DOM

我有一個問題，顯示我導入到我的home.jsx文件中的組件。沒有錯誤正在輸出。ReactJS - 導入組件不顯示在DOM

我的組件文件（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

來源

2016-01-17 Josh

什麼是您的HTML是什麼樣子？這可能意味着不存在具有「root」標識的元素。 – linkleonard

我的ID已到位。正在顯示在home.jsx中創建的HelloMessage元素。沒有導航組件。 – Josh

我相信它不會將導航組件渲染爲實際的DOM元素。雖然不知道如何去構建。 – Josh

，我覺得你說你HelloMessage組件是顯示，但你的Navigation組件沒有顯示，所以我來回答那一點。

當你這樣做：

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

...你只是告訴反應綁定無論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> 
     ); 
    } 
}

來源

2016-01-17 17:57:43

這非常合理！我只是不知道你可以將組件傳遞到其他組件中。然而，我試過這個，並且收到了一個渲染錯誤：'''Uncaught Invariant Violation：元素類型無效：期望一個字符串（對於內置組件）或一個類/函數（對於複合組件），但得到：未定義。檢查'HelloMessage'的渲染方法.''' – Josh

這可能意味着你的'Navigation'組件有問題。你確定你是根據你的目錄結構從正確的位置導入它嗎？ –

是的，如果我添加一個簡單的控制檯。日誌「到header.jsx我看到它輸出。 – Josh

ReactJS - 導入組件不顯示在DOM

回答

相關問題