快捷導(dǎo)航

react中通過(guò)props實(shí)現(xiàn)父子組件間通信的使用示例

更新時(shí)間：2023年10月26日 17:01:35 作者：jieyucx

在React中,父組件可以通過(guò)props屬性向子組件傳遞數(shù)據(jù),子組件可以通過(guò)props屬性接收父組件傳遞過(guò)來(lái)的數(shù)據(jù),本文就來(lái)介紹一下如何實(shí)現(xiàn),感興趣的可以了解一下

一、父組件向子組件傳值

在React中，無(wú)論是函數(shù)式組件還是類(lèi)組件，都可以通過(guò)props實(shí)現(xiàn)父組件向子組件傳值。以下是具體的示例說(shuō)明：

1. 函數(shù)式組件通過(guò)props傳值：

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

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

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

上述示例中，父組件通過(guò)將message作為props傳遞給子組件ChildComponent，子組件通過(guò)props.message獲取父組件傳遞的值，并進(jìn)行渲染。

2. 類(lèi)組件通過(guò)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>;
  }
}

在類(lèi)組件中，父組件通過(guò)<ChildComponent message={message} />的形式將值傳遞給子組件。子組件通過(guò)this.props.message獲取父組件傳遞的值。

無(wú)論是函數(shù)式組件還是類(lèi)組件，在使用props時(shí)，有以下幾點(diǎn)需要注意：

props是只讀的：在子組件中，無(wú)法直接修改父組件傳遞的props值，它們被認(rèn)為是不可變的。
在函數(shù)式組件中，props參數(shù)為函數(shù)的第一個(gè)參數(shù)，在類(lèi)組件中，props通過(guò)this.props訪問(wèn)。

3. 一次性傳遞多個(gè)值的優(yōu)雅傳遞方式

要一次性傳遞多個(gè)值，可以將所有值作為一個(gè)對(duì)象傳遞，并在子組件中使用解構(gòu)賦值的方式一次性接收所有的props。

例如，假設(shè)有一個(gè)父組件Parent和一個(gè)子組件Child，現(xiàn)在需要從Parent向Child傳遞多個(gè)值：

// 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 }) => {
  // 在子組件中直接使用解構(gòu)賦值方式接收所有的props
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Gender: {gender}</p>
      {/* 更多的渲染內(nèi)容... */}
    </div>
  );
}

export default Child;

在父組件Parent中，將所有要傳遞的值以對(duì)象propsData的形式定義，并使用擴(kuò)展運(yùn)算符{...propsData}將所有屬性擴(kuò)展到Child組件的props中。

在子組件Child中，使用解構(gòu)賦值方式一次性接收所有傳遞過(guò)來(lái)的props，然后可以按需使用這些props值。

這樣做可以實(shí)現(xiàn)一次性傳遞多個(gè)值，并且在子組件中以?xún)?yōu)雅的方式一次性接受所有props。

二、子組件向父組件傳值

在React中，無(wú)論是函數(shù)式組件還是類(lèi)組件，都可以通過(guò)props來(lái)實(shí)現(xiàn)子組件向父組件傳值。

1. 函數(shù)組件中

在函數(shù)式組件中，可以通過(guò)在子組件中定義一個(gè)事件處理函數(shù)，并將該事件處理函數(shù)作為prop傳遞給父組件。然后在子組件中可以調(diào)用該事件處理函數(shù)并傳遞需要傳遞的值，從而實(shí)現(xiàn)子組件向父組件傳值。以下是一個(gè)示例：

父組件：

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通過(guò)將handleChildValue函數(shù)傳遞給ChildComponent組件的onChildValue prop，實(shí)現(xiàn)了子組件向父組件傳值。當(dāng)子組件中的按鈕被點(diǎn)擊時(shí)，會(huì)調(diào)用handleClick函數(shù)并調(diào)用props.onChildValue將數(shù)據(jù)傳遞給父組件。

2. 類(lèi)組件中

在類(lèi)組件中也可以通過(guò)類(lèi)似的方式實(shí)現(xiàn)子組件向父組件傳值。下面是一個(gè)示例：

父組件：

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;

在上述示例中，父組件通過(guò)將handleChildValue函數(shù)傳遞給ChildComponent組件的onChildValue prop，實(shí)現(xiàn)了子組件向父組件傳值。當(dāng)子組件中的按鈕被點(diǎn)擊時(shí)，會(huì)調(diào)用handleClick函數(shù)并調(diào)用props.onChildValue將數(shù)據(jù)傳遞給父組件。

三、propTypes限制props

自React v15.5開(kāi)始，PropTypes被獨(dú)立出來(lái)作為獨(dú)立的包。在該版本之前，PropTypes是作為React的一部分直接包含在react庫(kù)中的。
在子組件中可以使用propTypes來(lái)限制父組件傳遞給子組件的props的數(shù)據(jù)類(lèi)型，并可以設(shè)置默認(rèn)值。使用propTypes需要先引入prop-types庫(kù)。

下面是一個(gè)示例：

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必須為字符串類(lèi)型且必傳
  description: PropTypes.string // 限制description為字符串類(lèi)型，非必傳
}

ChildComponent.defaultProps = {
  description: "No description" // 設(shè)置description的默認(rèn)值為"No description"
}

export default ChildComponent;

在上面的示例中，ChildComponent組件使用propTypes來(lái)限制title必須為字符串類(lèi)型且必傳，description為字符串類(lèi)型，但非必傳。如果父組件沒(méi)有傳遞title，或傳遞的類(lèi)型不是字符串，將會(huì)在控制臺(tái)收到相應(yīng)的警告。

另外，ChildComponent還使用defaultProps設(shè)置了description的默認(rèn)值為"No description"。當(dāng)父組件沒(méi)有傳遞description時(shí)，將使用該默認(rèn)值。

父組件使用ChildComponent時(shí)的使用示例：

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滿(mǎn)足了限制的類(lèi)型和必傳的要求，而description也滿(mǎn)足了限制的類(lèi)型。

以下是常見(jiàn)的數(shù)據(jù)類(lèi)型和PropTypes可以檢測(cè)的類(lèi)型：

數(shù)據(jù)類(lèi)型	PropTypes檢測(cè)的類(lèi)型
數(shù)字	PropTypes.number
字符串	PropTypes.string
布爾	PropTypes.bool
數(shù)組	PropTypes.array
對(duì)象	PropTypes.object
函數(shù)	PropTypes.func
符號(hào)	PropTypes.symbol
元素類(lèi)型	PropTypes.element
任何類(lèi)型	PropTypes.any
自定義類(lèi)型	PropTypes.instanceOf(MyClass)
一組類(lèi)型	PropTypes.oneOfType([PropTypes.number, PropTypes.string])
限制可選值	PropTypes.oneOf([‘red’, ‘blue’])
限制特定類(lèi)型的數(shù)組	PropTypes.arrayOf(PropTypes.number)
限制特定類(lèi)型的對(duì)象	PropTypes.objectOf(PropTypes.number)
限制對(duì)象具有特定屬性	PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })

到此這篇關(guān)于react中通過(guò)props實(shí)現(xiàn)父子組件間通信的使用示例的文章就介紹到這了,更多相關(guān)react props父子通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: