не в состоянии отреагировать моим компонентом реакции в избыточном виде

Question

• Я новичок, чтобы реагировать.
• Я пытаюсь отобразить компонент.
• , но сейчас я получаю ошибку
• , поэтому я отладил ипрокомментировал приложение.
• , но я все еще сталкиваюсь с ошибкой.
• Можете ли вы сказать мне, как исправить, чтобы в будущем я сам это исправил
• , предоставив мой фрагмент кода икод стекаблика ниже.

https://stackblitz.com/edit/react-zm9t65?file=components%2FApp.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import LoadingBar from "react-redux-loading-bar";

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
//import App from "./components/App"

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
  //  <App />
             <LoadingBar />

  </Provider>,
  document.getElementById('root')
)

Answer 1

Вы не можете добавить App и LoadingBar как дочерние элементы к Provider, потому что ожидается, что у них будет только один дочерний элемент, который, безусловно, является вашим App компонентом, на самом деле это не подходящее место для добавления LoadingBar ввсе.

Я только что изменил index.js следующим образом:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import LoadingBar from "react-redux-loading-bar";

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { logger } from 'redux-logger'
import reducer from './reducers'
import App from "./components/App"

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
   <App />
  </Provider>,
  document.getElementById('root')
)

App.js:

import React from 'react'
// import ChannelsField from './ChannelsField'
// import RecentChannelItem from './RecentChannelValues'

// import Button from '../containers/Button'
// import TopNews from '../containers/TopNews'
const App = () => (
  <div>
    <h1> Hello </h1>
  </div>
)
export default App;

И компонент отображается, и я вижуЗдравствуйте.

Обычно такие элементы, как LoadingBar, используются внутри ваших компонентов для отображения, когда вы ожидаете завершения асинхронных задач (например, выборка данных из API)

Поэтому я предлагаю импортировать ихиспользуя оператор import внутри App (или любого другого компонента) и используйте его.

Answer 2

Проблема не в вашем коде, а в вашем заявлении для комментария.

// не является оператором комментария jsx.{/* ... */} - это комментарий jsx.

Измените свой код на

index.js

const store = createStore(
  reducer,
  applyMiddleware(thunk, logger)
)
render(
  <Provider store={store}>
    <App>
       <LoadingBar />
    </App>
  </Provider>,
  document.getElementById('root')
)

App.js

const App = () => (
  <div> Hello World
    {/* < RecentChannelItem />
    < ChannelsField />
    <Button />
    <TopNews /> */}
  </div>
)
export default App;