Javascript 在React中将参数传递给props函数

我编写了两个示例组件来说明我正在尝试做什么。 如果电话来自同一个班级，我可以像下面这样做

onClick={this.myFunc.bind(this, param1, param2)}

如何在无状态组件上执行相同的操作，而不必处理绑定“this”

onClick={props.onClick['need to add params']}

从“React”导入React；
类BigComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（参数1、参数2）{
//用参数做点什么
}
render（）{
返回(
);
}
}
功能组件（道具）{
返回(
{props.handleClick（'value_1'，'value_2'）}>
{props.handleClick（'value_3'，'value_4'）}>
{/*在没有箭头函数的情况下如何执行上面的操作，因为我了解到它没有经过优化*/}
);
}

在

this.myFunc

中添加回调

this.myFunc = event => (param1, param2) => { ... do stuff }

在顶级组件中，您可以执行以下操作：

handleClick={this.myFunc}

在你的孩子身上，只要做：

onClick={handleClick(param1, param2)}

希望这对你有帮助

或者，您可以执行以下操作：

function SmallComponent(props){
    const handleClick = (param1, param2) => (event) => props.handleClick(param1, param2);

    return(
        <div>
            <button onClick={handleClick(param1, param2)}></button>
            ...
    );
}

功能组件（道具）{
const handleClick=（param1，param2）=>（event）=>props.handleClick（param1，param2）；
返回(
...
);
}

显示您的组件。我添加了示例组件，但我想从子组件发送参数，param1和param2的值必须从子组件到顶级组件。任何不使用箭头函数或bindI更新答案的调用方法。每当您有一个onClick事件，并且希望传递的参数不是来自onClick所传递的事件的参数时，您必须执行一个箭头函数（回调），或者您可以在视图中创建一个函数（我将在我的答案中添加一个示例）。创建函数有什么问题。你担心性能吗？是的，我担心性能，因为reactjs网站说arrow函数每次调用时都会在内存中创建一个新函数，这对性能有害。我在一个大型应用程序上工作，你已经将arrow函数缩减为一个（通过将其声明为变量）。是的，您将在每个渲染周期创建一个新函数，但对于现代计算机，创建这样一个简单函数所需的内存量可以忽略不计。我们不是在建造火箭，只是在开发网络应用；）