1. 函数组件：
import React from 'react';

function MyFunctionalComponent(props) {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
}

export default MyFunctionalComponent;

2. 类组件：
import React, { Component } from 'react';

class MyClassComponent extends Component {
  render() {
    return (
      <div>
        <p>Hello, {this.props.name}!</p>
      </div>
    );
  }
}

export default MyClassComponent;

3. 使用组件：
import React from 'react';
import MyFunctionalComponent from './MyFunctionalComponent';
import MyClassComponent from './MyClassComponent';

function App() {
  return (
    <div>
      <MyFunctionalComponent name="John" />
      <MyClassComponent name="Doe" />
    </div>
  );
}

export default App;

在这个例子中，MyFunctionalComponent 和 MyClassComponent 都是React组件，分别是函数组件和类组件的示例。在应用中，我们可以使用这些组件来构建更复杂的用户界面。

React组件可以接收props（属性），这是从父组件传递给子组件的数据。组件的render方法定义了组件的输出。




转载请注明出处：http://www.zyzy.cn/article/detail/4845/React