將 React.js 中的 function 從一個 function 組件傳遞到另一個組件

Question

I have a function in App component function postaviRutu and I want to pass it to child component SideBar and in that function on click to call that function in 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>
        );

Function 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

我相信您所犯的錯誤是將 function 錯誤地傳遞給子組件。

如果您想以傳遞的方式調用它，則必須調用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 function 被分配給側邊欄props object 的props屬性，但您調用的是undefined的props.postaviRutu ，而不是您應該調用props.props

應用程序.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>
    );