反應：無法呈現組件

Question

大家好，我是 React 的新手。只是想將我的組件渲染到應用程序組件中，但無法這樣做，這是我的代碼：

條件視圖.js：

import React, { Component } from 'react'

export class conditionalView extends Component {
    render() {
        return (
            <div>
                <h2>Conditional View</h2>
            </div>
        )
    }
}

export default conditionalView

應用程序.js

import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
import conditionalView from './conditionalView';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" />
        <Bike name="Caliber 125"  />
        <Car name="Maruti 800"  /> */}
       {/* <FnEvent />
       <ClsEvent /> */}
        {/* <ClsEventBind /> */}
       <conditionalView />
      </header>
    </div>
  );
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reactDom from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

基本上我想將 conditionView.js 組件的內容呈現到 App.js 中，但它沒有獲取內容。

Answer 1

在 React 中，自定義組件應該以capital letters 。 對於標准 HTML 元素，如div ， span使用小寫。

此外，無需從ConditionalView導出兩次。

您可以在聲明的同時與default關鍵字一起導出。

import React, { Component } from 'react'

export default class conditionalView extends Component {
    render() {
        return (
            <div>
                <h2>Conditional View</h2>
            </div>
        )
    }
}

Answer 2

你的組件應該是 PascalCase: ConditionalView，而不是 conditionalView。

Answer 3

React 組件應始終以大寫字母開頭，因此將<conditionalView />重命名為<ConditionalView /> ，

並更新導入語句； import ConditionalView from './conditionalView';

Answer 4

這可能是因為您不止一次導出組件

  export class conditionalView extends Component {

從這里刪除 export 關鍵字