未顯示ReactJS簡單組件

我試圖在我的網站上呈現一個小型搜索欄，但是我看到的是它仍然存在於網站中，但其大小變爲0x0，而且我找不到任何錯誤用我的ES6代碼。有人可以爲我調試嗎？未顯示ReactJS簡單組件

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="/style/style.css"> 
    <!-- <script src="https://maps.googleapis.com/maps/api/js"></script> --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
    <title>React-Redux-Learning</title> 
</head> 
<body> 
    <div id="container"></div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Latest compiled and minified Bootstrap JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</body> 
<script src="/bundle.js"></script> 
</html>

index.js：

import React from 'react' 
import ReactDOM from 'react-dom' 
import searchBar from './components/searchBar' 
const youtubeAPIKey = '...' 

const App =() => { 
    return (
    <div> 
     <searchBar /> 
    </div> 
) 
} 

ReactDOM.render(<App />, document.getElementById('container'))

searchBar.js：

import React, { Component } from 'react' 

class searchBar extends Component { 
    constructor(props) { 
    super(props) 

    this.state = {term: ''} 
    } 
    render() { 
    return <input onChange={event => console.log(event.target.value)}/> 
    } 
} 

export default searchBar

來源

2016-06-10 thousight

好吧，我的老闆真的發現了它，這是關於CAPITALIZING變量名稱的問題。在我蓋上變量名的第一個字母之後，事情又重新起作用了......

來源

2016-06-10 18:52:52 thousight

你所說的變量名稱實際上是組件名稱，不是嗎？你必須使用Pascal Case作爲組件名稱。 –

-1

你的搜索欄的代碼工作正常。檢查你的CSS，確保你的身體有一個大小。

來源

2016-06-10 17:38:17

我的css是空的，只有Bootstrap應該顯示出來 – thousight

嘗試評論引導樣式並添加自己的樣式。給身體寬度的東西。 html，body {width = 100％;寬度：100％; } –

它仍然不起作用，它實際上變成了0x0。所以我認爲這可能是別的東西，而不是css ... – thousight

首先，您已將組件定義爲<searchBar\>。我猜React無法將其視爲JSX組件，而是將其作爲純html標籤嵌入，正如Chrome瀏覽器的Elements選項卡中顯示的<searchbar\>標記所證明的那樣。

我認爲你需要的是，找出爲什麼react不能將searchBar看作JSX組件。我希望這會讓你走向正確的方向。

來源

2016-06-10 18:06:35

Emmm，這聽起來像一個很好的方式去，但我真的是新的反應，我不知道它會在哪裏犯下錯誤 – thousight

我很高興你知道了。 :) –

未顯示ReactJS簡單組件

回答

相關問題