react 传参方式
React是一个流行的JavaScript库，它被广泛用于构建现代Web应用程序。在React中，组件是构建应用程序的基本单位，组件之间传递参数是非常常见的操作。本文将介绍React中传递参数的不同方式。
一、props
在React中，组件之间传递参数最常用的方式是通过props。props是一种特殊的JavaScript对象，它包含了组件需要接收的属性。父组件可以通过props向子组件传递数据，子组件可以通过this.props访问这些数据。
1. 父组件向子组件传递props
父组件可以向子组件传递任意类型的数据，包括字符串、数字、布尔值、数组和对象等。下面是一个例子：
```javascript
class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent name="John" age={30} isMale={true} hobbies={['reading', 'swimming']} />
    );
  }
}
class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
        <p>Gender: {this.props.isMale ? 'Male' : 'Female'}</p>
        <p>Hobbies: {this.props.hobbies.join(', ')}</p>
      </div>
    );
  }
}
```
在上面的例子中，父组件ParentComponent向子组件ChildComponent传递了四个props：name、age、isMale和hobbies。在子组件中，可以通过this.props访问这些数据。
2. 子组件默认props
有时候，在父组件没有向子组件传递某个props时，子组件需要设置一个默认值。可以使用defaultProps属性来设置子组件的默认props。
```javascript
class ChildComponent extends React.Component {
  static defaultProps = {
    name: 'Unknown',
    age: 0,
    isMale: true,
    hobbies: []
  };
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
        <p>Gender: {this.props.isMale ? 'Male' : 'Female'}</p>
        <p>Hobbies: {this.props.hobbies.join(', ')}</p>
      </div>
    );
  }
}
```
在上面的例子中，如果父组件没有向ChildComponent传递name、age、isMale或hobbies这些props，则它们将使用默认值。
二、state
除了props，React还提供了另一种传递参数的方式——state。state是一种特殊的JavaScript对象，它包含了组件内部需要维护的状态。与props不同的是，state只能由当前组件自己修改。
1. 初始化state
可以在构造函数中初始化state：
```javascript
class MyComponent extends React.Component {
  constructor(props) {react组件之间通信
    super(props);
    this.state = {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。