将 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>
        );

Sidebar.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>
    );

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

Passing function in React.js from one function component to another

javascript

frontend

web-applications

reactjs

App.jsx

Sidebar.jsx