React 功能组件从另一个组件调用函数

Question

我在两个不同的组件中有两个名为 selectall 的按钮。在 Acompoent 中，我有 selectall 按钮及其 selectall 功能。我正在尝试从 Bcompoent 调用这个 selectall 函数。这里Bcompoent和Acompoent与Ccompoent有关系。谁能告诉我如何从 Bcompoent 触发 selectAll。

组件

 selectAll={selectAll}

  const selectAll = (e) => { console.log ("selectAll")}

Answer 1

class Parent extends React.Component {
selectAll = (e) => { console.log ("selectAll")}

render () {
return(
<Child eyeColor={selectAll} />
)
}
}
class Child extends React.Component {
render () {
return(
 <div style={{backgroundColor: this.props.eyeColor} />
)
}
}

或者你可以试试这个<Child eyeColor={selectAll()} />

Answer 2

为此，您需要将父组件的方法传递给 A 和 B 组件，如下所示：

class Parent extends React.Component{
 .
 .
 .
 selectAll = (data) => {
  console.log({data});
 }

 render(){
  return(
   <ComponentA selectAll={this.selectAll}  />
   <ComponentB selectAll={this.selectAll} />
  )
 }
}



class ComponentA extends React.Component{
 .
 .
 .
 render(){
  return(
    <button onClick={() => this.props.selectAll(data)>click me</button>
  )
 }
}

class ComponentB extends React.Component{
 .
 .
 .
 render(){
  return(
    <button onClick={() => this.props.selectAll(data)>click me</button>
  )
 }
}

Answer 3

如果您有可重用的函数，请使用这些函数创建另一个组件（Util 组件）并导出您需要重用的所有函数。

Utils.js 文件

import React from 'react'

function reUseFun1(/*parameters*/) {
   //f1 body
}

function reUseFun2(/*parameters*/) {
   //f2 body
}

export {
   reUseFun1,
   reUseFun2
}

需要使用util函数时

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

function Component() {
       return(
            <button onClick={Utils.reUseFun1(/*parameters*/)}> Cick Here </button>
       )
}
export default Component;

React 功能组件从另一个组件调用函数

React funcional component calling function from another component

prop

reactjs

react-functional-component