course-center/react-components

React 组件是 React.js 库的核心部分，它们是构建用户界面（UI）的基本构建块。本页面将介绍一些常见的 React 组件及其在课程中心中的应用。

常用 React 组件

• React Component

  • 用于创建可重用的 UI 组件。
  • 例如：<div>, <p>, <span>

• React Props

  • 组件属性，用于从父组件传递数据到子组件。
  • 例如：<MyComponent prop="value">

• React State

  • 组件内部的数据，可以随时间变化。
  • 例如：this.state = { count: 0 }

• React Lifecycle Methods

  • 组件在不同生命周期阶段调用的方法。
  • 例如：componentDidMount, componentWillUnmount

实例：计数器

一个简单的计数器组件，展示了如何使用 React 组件、状态和事件处理。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h2>计数器</h2>
        <p>当前计数：{this.state.count}</p>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

学习资源

想要了解更多关于 React 组件的信息，可以访问我们的React 教程页面。

[center] [center]