Не могу понять в чем дело с react'ом?

184
04 сентября 2017, 07:50

Добрый день, захотел вывести несколько и выдает такую страную ошибку в браузере, тем не менее компиляции успешна

index.js

import React from 'react'
import {render} from 'react-dom'
import ArticleList from './ArticleList'
import {articles} from './fixtures'

render(<ArticleList articles = {articles} />, document.getElementById('container'))

ArticleList.js

import React from 'react'
import Article from './Article'
export default function ArticleList({articles}){
  return(
    <ul>
      <li>Article article = {articles[0]}</li>
      <li>Article article = {articles[1]}</li>
      <li>Article article = {articles[2]}</li>
    </ul>
  )
}

Article.js

import React, {Component} from 'react'
// *********************************** Более сложный синтакс с ООП подходом ************** //
export default class Article extends Component{         // Class Article
  constructor(props){                                   // Инициализируем Конструктор
    super(props)                                          
    this.state = {                                      // Состояния объекта
      isOpen: true                                     // Задаем имя и состояние объекта     
    }
  }
  render(){                                             // метод render
    const {article} = this.props                        // теперь props идет в this
    const {isOpen}  = this.state                        // Передаем в render константу isOpen
    return (
      <div>
        <h1>{article.title}</h1>
        <button onClick={this.toggleOpen}> 
          {isOpen ? 'close' : 'open'}                   
          </button>
        {this.getBody()}
      </div>
    )
  }
  getBody(){                                            // Выносим проверку в отдельные метод 
    if(!this.state.isOpen) return null                  // Если закрыто ничего не делаем
    const {article} = this.props                        // Если открыто возврощаем section 
    return <section>{article.text}</section>
  }
  toggleOpen = () => {                                  // Описание объкта toggleOpen
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}

И сам текст ошибки

Answer 1

Обратите внимание на то, что импортируемый Компонент должен быть Тегом

<li><Article article = {articles[0]}/></li>
READ ALSO
Часть контента пропадает на телефонах

Часть контента пропадает на телефонах

Здравствуйте! Проблема такая, часть контента пропадает на телефонах, на всех в разных места обрезаетсяПоменял 2 хостинга, ничего не помогло,...

196
Найти элемент, заменить буквы, ввести в input

Найти элемент, заменить буквы, ввести в input

Порядок действий такой 1Ищем на странице input с определённым id Вроде так

182
Request Aborted | Остановка ajax запроса

Request Aborted | Остановка ajax запроса

Сервер - nodejs Отправляю файл на сервер с ajax запросом, прогресс загрузки отображается

172
php file_get_contents на javascript

php file_get_contents на javascript

Можете предложить альтернативу функции PHP file_get_contents на javascript?

188