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

【问题标题】：How to implement custom components in React?如何在 React 中实现自定义组件？
【发布时间】：2021-10-14 07:34:03
【问题描述】：

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

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

export default function App () {

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

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

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();

【问题讨论】：

标签： javascript reactjs react-native components

【解决方案1】：

尝试将您的回报包装在一个反应片段中，如下所示：

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

【讨论】：

不，它仍然不显示。

【解决方案2】：

在命名 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"))

【讨论】：

【解决方案3】：

在 React 中，所有组件的第一个字母都应该大写，这意味着您每次提到 componentClass 时都需要编辑并将其转换为 ComponentClass

【讨论】：

我明白了，我已经习惯了驼峰式，从没想过要用帕斯卡式