如何将子函数的参数传递给父 reactjs

Posted 2023-03-23

【中文标题】如何将子函数的参数传递给父 reactjs

【英文标题】：How do I pass arguments from a child function to a parent reactjs

【发布时间】：2018-08-28 14:19:44

【问题描述】：

我创建了一个简单的应用程序组件，它呈现一个侧边栏和一个仪表板。单击侧边栏中的链接，我想做一个 AJAX 请求并更改仪表板的状态。我已将点击处理函数移至 index.js 应用程序组件，以便它可以将道具向下传递到仪表板。

index.js：

import React from "react";

import  NavBar  from "./components/NavBar";
import  NavBarSide  from "./components/NavBarSide";
import  Dashboard from "./components/Dashboard"

import  render  from "react-dom";

class App extends React.Component 

    handleNavClick(url) 
        console.log(url)
    

    render() 
        return (
            <div>
                <NavBar/>
                <div className="container-fluid">
                    <div className="row">
                        <Dashboard/>
                        <NavBarSide clickHandler=(url) => this.handleNavClick(url)/>
                    </div>
                </div>
            </div>
        )
    



render(<App/>, window.document.getElementById("root"));

我的 NavBarSide 是这样的......

NavBarSide.js：

import React from 'react';
import  Nav, NavItem, NavLink  from 'reactstrap';

export  class NavBarSide extends React.Component 
    render() 
        return (
            <Nav className="col-md-2 d-none d-md-block bg-light sidebar">
                <div className="sidebar-sticky">
                    <ul className="nav flex-column">
                        <NavItem className="nav-item">
                            <NavLink className="nav-link" href="#" onClick=this.props.clickHandler("/api/highest/price")>Highest Price</NavLink>
                        </NavItem>
                    </ul>
                </div>
            </Nav>
        );
    

此函数似乎立即执行，而不是预期的行为。

如果有更好的方法来做到这一点（我认为使用 react-router v4），如果它也包括在内将会很有帮助。

【参考方案1】：

export default class NavBarSide extends React.Component 
    constructor(props) 
        super(props);

        // Bind the function only once - on creation
        this.onClick = this.onClick.bind(this);
    

    onClick() 
        this.props.clickHandler("/api/highest/price");
    

    render() 
        return (
            <Nav className="col-md-2 d-none d-md-block bg-light sidebar">
                <div className="sidebar-sticky">
                    <ul className="nav flex-column">
                        <NavItem className="nav-item">
                            <NavLink className="nav-link" href="#" onClick=this.onClick>Highest Price</NavLink>
                        </NavItem>
                    </ul>
                </div>
            </Nav>
        );
    

【参考方案2】：

您需要将函数放在另一个函数中。 像这样：

onClick=()=>this.props.clickHandler("/api/highest/price")

如果不是，渲染将在挂载时执行函数，因为您正在使用“（...）”触发

【讨论】：

虽然这可行，但它会在每次组件呈现时创建一个函数实例。

这是传递函数时的常见模式。另一种方法是通过绑定语句，但这只有在它是你的类的方法时才有效

现在，您可以在 Navside 组件中声明一个方法来执行您的 this.props.function 并使用 this.MyMethod.bind(this) 调用该方法

平庸并不代表正确。在渲染中绑定（this）也同样常见......