如何将onClick()事件从React中的父组件中的按钮传递给子组件?

Question

假设我有两个组件Component1和Component2。我在Component1中有一个按钮。

const Component1 = () => {
return(
<div>
<button onClick={()=>someExportFunc()}>Export</button>
<Component2 />
</div>
)
}

我的Component2.jsx是这样的。

import {ChartComponent} from '@xyz/charts';

const Component2 = () => {
let chartInstance = new ChartComponent();
return (
<ChartComponent
id='chart1'
ref={chart = chartInstance => chart}
>
</ChartComponent>
)
}

现在在Component2.jsx中导入的{ChartComponent}中定义了函数someExportFunc()。

如果我在Component2中使用按钮，它会很简单地工作。如,

import {ChartComponent} from '@xyz/charts'

const Component2 = () => {
let chartInstance = new ChartComponent();
return (
<button onClick={()=>someExportFunc()}>Export</button>
<ChartComponent
id='chart1'
ref={chart = chartInstance => chart}
>
</ChartComponent>
)
}

但是我如何使它在Component1中作为按钮工作?

我猜它有一些东西与定义按钮的状态，然后传递状态下来，但我不完全理解一个按钮的状态如何工作。onClick()应该是某个瞬时布尔值，不是吗?所谓瞬间，我的意思是"点击"一结束，它就会改变。

Edit1好的，所以someExportFunc()是在我的导入中定义的库函数。它使用在Component2中创建的chartInstance。它的实际用例是

<button 
value='export'
onClick={() => chartInstance.exportModule.export('PNG', 
`image`)}>
Export
</button>

所以当我点击Component1中的按钮时，它会将onClick事件发送给Component2中的ChartComponent。

Answer 1

我们需要把这个函数作为prop传递给第二个组件。

FirstComponent

<SecondComponent { ...data } onClick={ () => manageClick() } />

在第二个组件中使用onClick prop。

SecondComponent

<button onClick={onClick}>Click</button>

Answer 2

React使用单向数据绑定，在这种情况下意味着父节点到子节点。

如果组件2是组件1的子组件，则在组件1中定义该函数，并将该函数和Chart Component分别作为props和子组件传递。

父:

const Component1 = () => {
const someFunc = () => {...}
return <Component2 someFunc={someFunc}> <ChartComponent/> </Component2>
}

孩子:

const Component2 = (props) => {
props.someFunc();
return <div> {props.children} </div>
}