Question

我正在使用react并且没有名为“Button.jsx”的状态组件，并且我将向按钮组件发送一个函数（通过props），如下所示：

app.jsx

addValue(){
    console.log("add")
}

<Button className="btn btn-primary" text="click" action={this.addValue}/>

Button.jsx

中的

import React from 'react'

export default class Button extends React.Component{
  constructor(props){
    super(props)
    this.action = this.action.bind(this);
  }
  action(e){
    // console.log(this.props.action)
    const {props} = this,{action = ()=>{}} = props;
    action()
  }
    render() {
      return (
        <button className={this.props.className} onClick={this.action}>{this.props.text}</button>
      )
    }
}

我知道它有效（执行addValue()）。但是怎么样？关键点在action(e)函数上，任何人都可以解释吗？

Answer 1

我不确定我是否理解你的问题，但我可以引导你完成它：

在您的父组件（app.jsx）中，您将向函数（addValue）传递给您的子组件（button.jsx），该组件在调用时记录“add”。请注意，您要将addValue函数作为道具action传递：action={this.addValue}
在您的子组件（button.jsx）中，您现在可以访问该功能（addValue）。
在按钮组件中，您知道定义另一个函数（action），然后将其传递给渲染中onClick的{{1}}。
在button函数中，您可以从上下文访问道具：action，然后从道具const {props} = this获取action函数。
此方案的命名可能会令人困惑，因为您将{action = ()=>{}} = props作为addValue向下传递，然后在子级中定义本地action，该子级调用另一个action传递下来。使用此设置，您的button.jsx包含action和this.action，它们最终都会执行相同的操作。

因此，你的Button.jsx可能看起来像这样，并做同样的事情：

this.props.action

我猜你在button.jsx中有两个import React from 'react' export default class Button extends React.Component{ render() { return ( <button className={this.props.className} onClick={this.props.action}>{this.props.text}</button> ) } }感到困惑。

希望有所帮助，如果您有任何其他问题，请告诉我。

Answer 2

将一些值（字符串，数字或函数）传递给react组件属性（例如<Button text="click" action={this.addValue}/>）。您可以在此组件中获取它，例如this.props. +属性的名称。对于上面提到的Button组件，this.props.text返回click字符串，this.props.action返回addValues函数（您在父组件中定义它），您可以调用它使用() - this.props.action();

react.js中有一些特殊属性。处理某些事件的属性：onClick，onMouseEnter，onMouseMove等。您可以将此函数传递给此属性，并在触发相应事件时执行此函数。在您的示例中，您将组件方法action传递给onClick属性。

在action方法中有一些es6魔法。它被称为对象解构，您可以阅读更多关于它的here。如果有某个对象，可以通过以下方式将此对象的属性值分配给具有相同名称的变量：

var object = {p: 42, q: true};
var {p, q, d = 'default' } = object;

console.log(p); // 42
console.log(q); // true
console.log(d); // 'default'

如果对象在变量d = 'default'中没有d名称的属性，则还可以指定一些默认值d，并为其分配字符串default。如果由于某种原因，我们不会将值传递给action组件属性，则此代码：const {props} = this, {action = ()=>{}} = props;将noop函数() => {}分配给action变量并调用action()不要抛出错误。

因此，在您的情况下，您可以重写它：

action(e){
  const {props} = this,{action = ()=>{}} = props;
  action()
}

为：

action(e){
  const props = this.props;
  const action = props.action || (() => {});

  action();
}

在此处查看此示例 - https://jsfiddle.net/kxrkddmm/

如何解释这个javascript方法？

2 个答案: