ReactJS 简单组件未显示

Question

我试图在我的网站上呈现一个小的搜索栏，但我看到它仍然存在于网站中，但它的大小变成了 0x0，我在我的 ES6 上找不到任何问题代码。有人可以帮我调试吗？

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

Answer 1

您的搜索条码工作正常。检查您的 CSS 以确保您的 body 有尺码。

Answer 2

首先，您将组件定义为 <searchBar\>。我猜 React 无法将其视为 JSX 组件，而是将其作为普通的 html 标签嵌入，chrome 的元素选项卡中的 <searchbar\> 标签证明了这一点。

我认为您需要的是弄清楚为什么 React 无法将 searchBar 视为 JSX 组件。我希望这能引导你走向正确的方向。

Answer 3

好吧我老板居然发现了，就是变量名大写的问题。在我把变量名的第一个字母加起来后，事情又开始了……

ReactJS 简单组件未显示

ReactJS Simple Component Not Shown

reactjs

react-jsx