未显示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简单组件

回答

相关问题