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

首先，您已将组件定义为<searchBar\>。我猜React无法将其视为JSX组件，而是将其嵌入到普通的html标签中，这可以通过chrome的Elements选项卡中的<searchbar\>标记来证明。

我认为您需要的是，找出为什么react不能将searchBar视为JSX组件。我希望这能引导你走向正确的方向。

Answer 2

好的，我的老板确实找到了它，这是关于CAPITALIZING变量名的问题。在我对变量名称的第一个字母设置上限后，事情再次起作用......

Answer 3

您的搜索条形码正常。检查你的CSS以确保你的身体有一个大小。

ReactJS简单组件未显示

3 个答案: