如何将函数作为道具从函数组件传递到类组件

Question

我有两个组件。父组件是功能组件。它有一个箭头功能，可以导航到另一条路线。我想把那个箭头函数传递给一个子组件，它是一个类组件。但我不知道为什么它似乎不起作用，当我在类组件中使用它时，它无法导航。可能是我传错了道具之类的。

父组件

function MyEditorFunction() {
let location = useLocation();
let query = new URLSearchParams(location.search);
let navigate = useNavigate();
const navigation = () => {
navigate(`/Profile?id=${query.get('id')}`)
}
return (
<div className='MyEditorFunction'>
<MyEditor userId={query.get('id')} navigate={navigation} />
</div>
)
}

子组件

class MyEditor extends React.Component {
handleClick{
this.props.navigate
}
render() {
return (
<button onClick={this.handleClick}></button>
)
{
}

Answer 1

按如下方式更改您的class component。从this.props中得到navigation函数，传递给button中的onClickprop。

class MyEditor extends React.Component {
render() {
const { navigation } = this.props;
return <button onClick={navigation}></button>;
}
}