基于react组件之间的参数传递(详解)

React组件间的参数传递详解：来自狼蚁网站SEO优化长沙网络推广的分享

在React应用中，组件间的数据传递是一个基础且重要的概念。今天，长沙网络推广为大家带来一篇关于React组件间参数传递的详细解读，希望给大家提供一个参考。

一、父组件向子组件传递参数

假设我们有一个子组件Child和一个父组件Parent。我们可以在父组件中通过state来定义需要传递的参数，然后在子组件中通过props接收。

我们定义子组件Child：

```jsx

import React, { Component } from 'react';

class Child extends Component {

componentDidMount() {

let name = this.props.default;

console.log(name); // 输出接收到的参数

}

render() {

return ; // 假设Input是一个输入框组件

}

}

```

然后，我们在父组件Parent中使用这个子组件，并传递参数：

```jsx

import React, { Component } from 'react';

import Child from './Child';

class Parent extends Component {

state = {

name: 'Bob' // 需要传递的参数

}

render() {

return (

)

}

}

```

二、子组件向父组件传递参数（通过回调函数）

我们在父组件中定义一个方法，用于接收子组件传递的参数，并在state中更新这个参数。然后，我们将这个方法作为prop传递给子组件。子组件在需要的时候调用这个方法，就能将参数传递给父组件。

定义子组件Child：

```jsx

class Child extends Component {

state = {

name: 'Bob' // 子组件中的状态数据

}

componentDidMount() {

this.props.toParent(this.state.name); // 通过回调函数传递参数给父组件

}

render() { ... } // 同上

}

```

然后，在父组件Parent中使用这个子组件，并传递回调函数：

```jsx

class Parent extends Component { ... } // 同上，但需要添加以下方法：

getChildInfo = (name) => { // 定义方法接收子组件传递的参数，并更新父组件的state

this.setState({name});