如何在 React 中实现自定义组件？

Question

我在 React 中创建了一个显示一段文本的简单测试程序。

import React from 'react';
import componentClass from './components/componentClass';

export default function App () {

    return (
      <h1>example</h1>
    )
  }

我现在要做的是将此示例文本作为自己的独立组件。我创建了一个名为 componentClass 的 class 组件，其中显示了示例文本。

import React, { Component } from 'react';

export default class componentClass extends Component {

  render() {
    return (
      <h1>example</h1>
    )
  }
}

然后我在 App.js 中渲染这个组件。

import React from 'react';
import componentClass from './components/componentClass';

export default function App () {

  return (
    <componentClass />
  )
}

问题是什么都没有显示，所以我很困惑为什么没有显示该组件。下面是我的 index.js 文件。

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

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

Answer 1

尝试将您的 return 包裹在像这样的 React 片段中：

 return (
   <>
    <ComponentClass />
   </>
  )

Answer 2

在 React 中，所有组件的首字母都应大写，这意味着您每次提到 componentClass 时都需要进行编辑，并将其变为 ComponentClass

Answer 3

命名 React 组件时应该使用 PascalCase

working fiddle

class ComponentClass extends React.Component {

  render() {
    return (
      <h1>Component class</h1>
    )
  }
}

function App () {
  return (
    <ComponentClass />
  )
}
  
ReactDOM.render(<App />, document.querySelector("#app"))

如何在 React 中实现自定义组件？

How to implement custom components in React?

javascript

components

reactjs

react-native