Question

当前

在将函数传递给子组件的反应中，我有一个父组件
子组件向该函数添加了一个变量
该函数具有可选的回调，并在提供该函数时运行以记录2条控制台消息（按预期）：

你好，世界！

你好火星！

反应脚本：

    class App extends Component {

        parentFunction = (optional_callback, variable_defined_in_child) => {
            console.log("hello " + variable_defined_in_child);
            if (optional_callback) {optional_callback()};
        }

        myCallback = () => {
            console.log("hello mars!");
        }

        render () {
            <ChildComponent
                myFunction = {this.parentFunction.bind(this, myCallback)}
            />
        }
    }

    const ChildComponent = props => {
        const newVariable = "world!";
        props.myFunction(newVariable);
    }

问题

如果未提供回调，则期望收到控制台消息：

你好，世界！

但是相反，variable_defined_in_child被放置在optional_callback的位置，并且功能失败。

问题

是否可以从子组件访问props.myFunction的绑定变量，检查其是否具有回调，如果没有，则提供为null？

注意：我是一个相对较新的响应者，所以请让我知道我是否正在使用反模式进行编码，但是如果没有，我想了解我的请求是否可行，而不是重构代码。

Answer 1

您可以将parentFunction更改为返回另一个函数的函数。（如果您不熟悉此概念，可能会很复杂，但是请放心。）

想象parentFunction是：

parentFunction = optional_callback => variable_defined_in_child => {
    console.log("hello " + variable_defined_in_child);
    if (optional_callback) {
        optional_callback();
    }
};

然后将其通过以下方式传递给ChildComponent：

<ChildComponent
    myFunction={this.parentFunction.bind(this, this.myCallback)()}
/>

那么这是怎么回事？

您将parentFunction与this绑定，并将this.myCallback作为参数传递给它，然后调用。

这将返回一个函数，该函数接受单个参数variable_defined_in_child来执行您想要的功能：console.log等等……同时可以访问this.myCallback而不将其作为参数传递。

如果您没有将this.myCallback传递给parentFunction，一切都会正常进行。

这是工作中的CodeSandbox

您的代码将是：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  parentFunction = optional_callback => variable_defined_in_child => {
    console.log("hello " + variable_defined_in_child);
    if (optional_callback) {
      optional_callback();
    }
  };

  myCallback = () => {
    console.log("hello mars!");
  };

  render() {
    return (
      <ChildComponent
        myFunction={this.parentFunction.bind(this, this.myCallback)()}
      />
    );
  }
}

const ChildComponent = props => {
  const newVariable = "world!";
  props.myFunction(newVariable);
  return <div />;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

是否可以在React中检查和/或更改绑定变量的值？

1 个答案: