在基于类的组件中使用参数 - Javascript

在React中，我们通常把一个组件看做一个函数，在该函数的参数中包含了组件需要的props属性，props对象是只读的，不允许组件直接修改props属性。基于类的组件也是同样的，参数通过构造函数初始传递，然后通过this.props使用，因此每个基于类的组件有一个this.props对象。

定义类组件

定义一个类组件很简单，只要继承自React的Component基类，然后重写一个render方法，最后导出类即可。

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

export default MyComponent;

这个基本的代码中，我们定义了一个简单的MyComponent类组件，该组件接收两个props参数：title和content，然后在render方法中使用这两个参数，返回一个div中包含了一个h1和一个p元素。

传递参数

通过上述定义的组件，我们可以像下面这样传递参数

<MyComponent title="Hello World" content="This is content" />

这里我们给MyComponent组件传递了两个props属性，分别为title和content，通过两个相应的字符串赋值。这样，在组件中就可以使用this.props.title和this.props.content，然后在render中渲染到页面上。

处理参数

在类组件中，我们可以通过构造函数获取props属性，在构造函数中调用super(props)方法将props属性传递给Component基类，然后在组件内部的其他函数中都能使用props属性。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.title);
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

export default MyComponent;

在上面的例子中，我们在构造函数中输出了title属性，然后在render方法中也使用了title属性，这个时候我们对组件的title属性进行了读取操作，但对组件传递的props属性进行了写操作，这是不可行的，这也是为什么这些属性名称被定义为“只读”的原因。