React 组件和 prop：入门教程

组件和 props
React 的核心概念是组件。组件是可重用的代码块，用于描述 UI 中的一部分内容。组件可以通过 props 接收输入，通过 state 管理本地数据，并通过事件处理程序响应用户的操作。
例如，我们可以创建一个名为 Button 的组件，该组件接受两个 prop：text 和 onClick。这两个 prop 分别表示按钮上的文本和当用户点击按钮时应执行的回调函数。

function Button(props) {
    
    
  return (
    <button onClick={
    
    props.onClick}>
      {
    
    props.text}
    </button>
  );
}

// 使用 Button 组件
<Button text="Click me!" onClick={
    
    () => alert('Button clicked!')} />

在这个例子中，Button 组件接收一个对象作为参数。这个对象包含了组件所需的 prop。组件内的代码可以访问这些 prop，并根据其值来决定组件的行为。
除了函数式组件之外，React 还支持类组件。类组件是使用 ES6 类语法编写的组件，并且具有更多的功能，例如生命周期方法和静态属性。下面是一个简单的类组件示例：

class Welcome extends React.Component {
    
    
  render() {
    
    
    return <h1>Hello, {
    
    this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome name="Sara" />,
  document.getElementById('root')
);

在这个例子中，Welcome 组件接收一个名为 name 的 prop，并将其显示在 <h1> 标签中。与函数式组件不同，类组件必须在其内部定义一个名为 render 的方法来定义其输出。
除了从父组件接收到的 prop 之外，组件还可以有自己的本地数据，这被称为 state。state 是由组件自己控制的，它通常表示组件当前的状态。当我们改变一个组件的 state 时，React 将自动重新渲染该组件以反映新的 state。
例如，我们可以创建一个名为 Counter 的组件，该组件有一个初始的 state，即 count。当用户单击按钮时，我们将增加 count 的值，并更新组件的 state。

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

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

  render() {
    
    
    return (
      <div>
        Count: {
    
    this.state.count}
        {
    
    ' '}
        <button onClick={
    
    () => this.increment()}>
          Increment
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

在这个例子中，我们首先在构造函数中设置组件的初

React 组件和 prop：入门教程

猜你喜欢