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

【问题标题】：Passing function in React.js from one function component to another将 React.js 中的函数从一个函数组件传递到另一个函数组件
【发布时间】：2021-06-05 17:55:31
【问题描述】：

我在 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>
        );

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

【问题讨论】：

你的终端呈现什么信息？
有什么错误？
@SurajSharma 它编译，所以终端没有错误。但它不起作用
@DiN，我已经添加了答案。

标签： javascript reactjs web-applications frontend

【解决方案1】：

在您的解决方案中，postaviRutu 函数分配给侧边栏的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>
    );

【讨论】：

【解决方案2】：

你应该这样做：

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

【讨论】：

我看不出这和我的有什么不同
这是我的

【解决方案3】：

我认为您犯的错误是将函数错误地传递给子组件。

如果你想以你传递它的方式调用它，你必须调用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>
        );

【讨论】：