在React中如何通過Props向子組件傳遞回調(diào)函數(shù)

發(fā)布時間：2024-06-29 10:43:46 來源：億速云閱讀：86 作者：小樊欄目：web開發(fā)

在React中，可以通過Props將回調(diào)函數(shù)傳遞給子組件。下面是一個例子：

// ParentComponent.js

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

class ParentComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  }

  render() {
    return (
      <ChildComponent onClick={this.handleClick} />
    );
  }
}

export default ParentComponent;

// ChildComponent.js

import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me</button>
    );
  }
}

export default ChildComponent;

在上面的例子中，ParentComponent中定義了一個handleClick方法，然后將這個方法作為onClick屬性傳遞給ChildComponent。在ChildComponent中，通過this.props.onClick調(diào)用handleClick方法。

這樣子，當(dāng)ChildComponent中的按鈕被點擊時，會觸發(fā)handleClick方法。

向AI問一下細節(jié)

在React中如何通過Props向子組件傳遞回調(diào)函數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽