React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react props父子通信

react中通过props实现父子组件间通信的使用示例

作者：jieyucx

在React中,父组件可以通过props属性向子组件传递数据,子组件可以通过props属性接收父组件传递过来的数据,本文就来介绍一下如何实现,感兴趣的可以了解一下

一、父组件向子组件传值

在React中，无论是函数式组件还是类组件，都可以通过props实现父组件向子组件传值。以下是具体的示例说明：

1. 函数式组件通过props传值：

// 父组件
function ParentComponent() {
  const message = "Hello, World!";

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

上述示例中，父组件通过将message作为props传递给子组件ChildComponent，子组件通过props.message获取父组件传递的值，并进行渲染。

2. 类组件通过props传值：

// 父组件
class ParentComponent extends React.Component {
  render() {
    const message = "Hello, World!";

    return (
      <div>
        <ChildComponent message={message} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

在类组件中，父组件通过<ChildComponent message={message} />的形式将值传递给子组件。子组件通过this.props.message获取父组件传递的值。

无论是函数式组件还是类组件，在使用props时，有以下几点需要注意：

3. 一次性传递多个值的优雅传递方式

要一次性传递多个值，可以将所有值作为一个对象传递，并在子组件中使用解构赋值的方式一次性接收所有的props。

例如，假设有一个父组件Parent和一个子组件Child，现在需要从Parent向Child传递多个值：

// Parent组件
import React from 'react';
import Child from './Child';

const Parent = () => {
  const propsData = {
    name: 'John',
    age: 25,
    gender: 'male',
    // 更多的props...
  };

  return <Child {...propsData} />;
}

export default Parent;


// Child组件
import React from 'react';

const Child = ({ name, age, gender }) => {
  // 在子组件中直接使用解构赋值方式接收所有的props
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Gender: {gender}</p>
      {/* 更多的渲染内容... */}
    </div>
  );
}

export default Child;

在父组件Parent中，将所有要传递的值以对象propsData的形式定义，并使用扩展运算符{...propsData}将所有属性扩展到Child组件的props中。

在子组件Child中，使用解构赋值方式一次性接收所有传递过来的props，然后可以按需使用这些props值。

这样做可以实现一次性传递多个值，并且在子组件中以优雅的方式一次性接受所有props。

二、子组件向父组件传值

在React中，无论是函数式组件还是类组件，都可以通过props来实现子组件向父组件传值。

1. 函数组件中

在函数式组件中，可以通过在子组件中定义一个事件处理函数，并将该事件处理函数作为prop传递给父组件。然后在子组件中可以调用该事件处理函数并传递需要传递的值，从而实现子组件向父组件传值。以下是一个示例：

父组件：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [value, setValue] = useState('');

  const handleChildValue = (childValue) => {
    setValue(childValue);
  }

  return (
    <div>
      <ChildComponent onChildValue={handleChildValue} />
      <p>Value from child component: {value}</p>
    </div>
  );
}

export default ParentComponent;

子组件：

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.onChildValue('Hello from child');
  }

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default ChildComponent;

在上述示例中，ParentComponent通过将handleChildValue函数传递给ChildComponent组件的onChildValue prop，实现了子组件向父组件传值。当子组件中的按钮被点击时，会调用handleClick函数并调用props.onChildValue将数据传递给父组件。

2. 类组件中

在类组件中也可以通过类似的方式实现子组件向父组件传值。下面是一个示例：

父组件：

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }

  handleChildValue = (childValue) => {
    this.setState({ value: childValue });
  }

  render() {
    return (
      <div>
        <ChildComponent onChildValue={this.handleChildValue} />
        <p>Value from child component: {this.state.value}</p>
      </div>
    );
  }
}

export default ParentComponent;

子组件：

import React from 'react';

class ChildComponent extends React.Component {
  handleClick = () => {
    this.props.onChildValue('Hello from child');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click Me</button>
    );
  }
}

export default ChildComponent;

在上述示例中，父组件通过将handleChildValue函数传递给ChildComponent组件的onChildValue prop，实现了子组件向父组件传值。当子组件中的按钮被点击时，会调用handleClick函数并调用props.onChildValue将数据传递给父组件。

三、propTypes限制props

自React v15.5开始，PropTypes被独立出来作为独立的包。在该版本之前，PropTypes是作为React的一部分直接包含在react库中的。
在子组件中可以使用propTypes来限制父组件传递给子组件的props的数据类型，并可以设置默认值。使用propTypes需要先引入prop-types库。

下面是一个示例：

import React from 'react';
import PropTypes from 'prop-types';

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <p>{this.props.description}</p>
      </div>
    );
  }
}

ChildComponent.propTypes = {
  title: PropTypes.string.isRequired, // 限制title必须为字符串类型且必传
  description: PropTypes.string // 限制description为字符串类型，非必传
}

ChildComponent.defaultProps = {
  description: "No description" // 设置description的默认值为"No description"
}

export default ChildComponent;

在上面的示例中，ChildComponent组件使用propTypes来限制title必须为字符串类型且必传，description为字符串类型，但非必传。如果父组件没有传递title，或传递的类型不是字符串，将会在控制台收到相应的警告。

另外，ChildComponent还使用defaultProps设置了description的默认值为"No description"。当父组件没有传递description时，将使用该默认值。

父组件使用ChildComponent时的使用示例：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent title="Hello" description="This is a child component" />
      </div>
    );
  }
}

export default ParentComponent;

在上面的示例中，ParentComponent传递了title和description给ChildComponent。title满足了限制的类型和必传的要求，而description也满足了限制的类型。

以下是常见的数据类型和PropTypes可以检测的类型：

数据类型PropTypes检测的类型
数字PropTypes.number
字符串PropTypes.string
布尔PropTypes.bool
数组PropTypes.array
对象PropTypes.object
函数PropTypes.func
符号PropTypes.symbol
元素类型PropTypes.element
任何类型PropTypes.any
自定义类型PropTypes.instanceOf(MyClass)
一组类型PropTypes.oneOfType([PropTypes.number, PropTypes.string])
限制可选值PropTypes.oneOf([‘red’, ‘blue’])
限制特定类型的数组PropTypes.arrayOf(PropTypes.number)
限制特定类型的对象PropTypes.objectOf(PropTypes.number)
限制对象具有特定属性PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })

到此这篇关于react中通过props实现父子组件间通信的使用示例的文章就介绍到这了,更多相关react props父子通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文