Простой компонент 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

ОК, мой босс на самом деле нашел это, это проблема КАПИТАЛИЗАЦИИ имен переменных. После того, как я закрою первую букву имени переменной, все снова работает ...

источник

2016-06-10 18:52:52 thousight

То, что вы называете именем переменной, на самом деле является именем компонента, не так ли? Вы должны использовать имена Pascal для имен компонентов. –

-1

Ваш поиск штрих-код отлично работает. Проверьте свой CSS, чтобы убедиться, что ваше тело имеет размер.

источник

2016-06-10 17:38:17

Мой css пуст, только сейчас нужно установить Bootstrap – thousight

попробуйте комментировать стили бутстрапа и добавить в свой собственный стиль. Что-то, что дает ширину тела. html, body { ширина: 100%; } –

Он по-прежнему не работает, и он фактически становится 0x0. Поэтому я думаю, что это может быть что-то другое, а не css ... – thousight

Прежде всего, вы определили свой компонент как <searchBar\>. Я думаю, что React не может видеть его как компонент JSX и вместо него встраивает его как простой тег html, о чем свидетельствует тег <searchbar\>, который отображается на вкладке «Элементы» хром.

Я думаю, что вам нужно, чтобы выяснить, почему реакция не может видеть searchBar как компонент JSX. Надеюсь, это приведет вас в правильном направлении.

источник

2016-06-10 18:06:35

Эмм, это звучит как хороший способ, но я действительно новичок в реактиве, что я понятия не имею, где это может произойти ошибка – thousight

Я рад вы поняли это. :) –

Простой компонент ReactJS Не отображается

ответ

Смежные вопросы