将 React.js 中的函数从一个函数组件传递到另一个

Question

我在 App 组件函数 postaviRutu 中有一个函数，我想将它传递给子组件 SideBar 并在该函数中单击以在 App 中调用该函数。到目前为止，我已经完成了以下操作，它可以编译但有一些我找不到的错误。 任何帮助都会很棒

function App() {
    const [theme, setTheme] = useState(4);

    function postaviRutu(){
        console.log("KLIKNUO")
    }

   
        return (
            <div className="App">
                <ApBar></ApBar>
                <Table className="tabela">
                    <tr className="Sidebarr">

                        <td><Sidebar props={postaviRutu}></Sidebar></td>
                    </tr>
                </Table>
            </div>
        );

函数 Sidebar.js

function Sidebar(props) {
    return (
        <div className="Sidebar">
            <ul className="SidebarList">
                <li className="elementi">
                    <div><Button onClick={ props.postaviRutu}>Početna</Button></div>
                </li>
                ...
            </ul></div>
    );

Answer 1

您应该执行以下操作：

<Sidebar postaviRutu={postaviRutu}></Sidebar>

function Sidebar(props) {
    return (
        <div className="Sidebar">
            <ul className="SidebarList">
                <li className="elementi">
                    <div><Button onClick={ props.postaviRutu}>Početna</Button></div>
                </li>
                ...
            </ul></div>
    );

Answer 2

我相信你犯的错误是将函数错误地传递给子组件。

如果你想按照你传递的方式调用它，你必须调用 props.props，而你应该将它作为 <td><Sidebar postaviRutu={postaviRutu}></Sidebar></td> 传递

function App() {
    const [theme, setTheme] = useState(4);

    function postaviRutu(){
        console.log("KLIKNUO")
    }

   
        return (
            <div className="App">
                <ApBar></ApBar>
                <Table className="tabela">
                    <tr className="Sidebarr">

-                        <td><Sidebar props={postaviRutu}></Sidebar></td>
+                        <td><Sidebar postaviRutu={postaviRutu}></Sidebar></td>

                    </tr>
                </Table>
            </div>
        );

Answer 3

在您的解决方案中，postaviRutu 函数被分配给 Sidebar 的 props 对象的 props 属性，但您正在调用 props.postaviRutu，即 undefined，而不是您应该调用 props.props

App.jsx

function App() {
    const [theme, setTheme] = useState(4);

    function postaviRutu(){
        console.log("KLIKNUO")
    }

   
        return (
            <div className="App">
                <ApBar></ApBar>
                <Table className="tabela">
                    <tr className="Sidebarr">

                        <td><Sidebar onClick={postaviRutu}></Sidebar></td>
                    </tr>
                </Table>
            </div>
        );

侧边栏.jsx

function Sidebar(props) {
    return (
        <div className="Sidebar">
            <ul className="SidebarList">
                <li className="elementi">
                    <div><Button onClick={props.onClick}>Početna</Button></div>
                </li>
                ...
            </ul></div>
    );