Question

我使用反应原生0.48，我想知道以下是否可能。

所以我的目的是让我的代码更加可重用。我有4个类，每个类在componentDidMount中都有类似的代码。它们共享类似的代码componentDidMount（），但render方法中的其余代码有点不同。

我的想法是跨类共享代码：

class 1

        componentDidMount(){
        componentDidMountTemplate().bind(this);
      }

其中insideDidMountTemplate（它只是一个导出的函数），使用“this”关键字的代码应该对类1中的对象进行操作，或者基本上是任何调用和绑定它的类

但是行componentDidMountTemplate（）。bind（this）;生成此错误：

无法将类作为函数调用

任何解决方案？想法？

Answer 1

你没有绑定任何东西，bind方法返回一个新的实例而你没有将它存储在任何地方，并且最重要的是你没有在它自己的函数上运行绑定，而是你在返回的值上做了它该功能与您使用()并调用它一样我不确定你在代码中重复使用的是什么，因为你没有提供更多的细节，但基本上你根本不需要绑定它，只需将this对象传递给外部函数。

所以你有两个主要选择：

绑定外部函数并将其存储在您需要的类中调用它。 并祈祷任何将使用您的功能的人会记得绑定它！。
如果您的案例中的外部函数componentDidMountTemplate被声明为箭头函数，那么绑定将不起作用，因为箭头函数在词汇上下文中使用this（参见我的示例）。
显式传递对象作为参数（我发现它最多对于此功能的消费者而言，可读且清晰。

这只是一个小概念验证的片段：

class MyClass {
  externalFunc = ref => {
    console.log("passing the this explicit as a parameter", ref.state);
  };

  externalFunc2() {
    // depending on bind and praying for the best!
    console.log("depending on bind ", this.state);
  }

  externalFunc3 = () => {
    // with arrow functions bind won't work
    //because `this` is bound in a lexical context
    console.log("arrow function", this.state);
  };
}

const MyClassInstance = new MyClass();

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someValue: "123"
    };
    this.externalFunc2 = MyClassInstance.externalFunc2.bind(this);
    this.externalFunc3 = MyClassInstance.externalFunc3.bind(this);
  }

  componentDidMount() {
    MyClassInstance.externalFunc(this);
    this.externalFunc2();
    this.externalFunc3();
  }

  render() {
    return (
      <div>
        <div>Look at the console!</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

您可以使用类属性并将componentDidMount定义为组件内部的箭头函数（而不是方法）。箭头函数使用词法this，因此您不必费心使用函数绑定。例如：

componentDidMount = () => {
  // you can access `this` safely
}

Answer 3

componentDidMountTemplate().bind(this);

应该是

this.componentDidMountTemplate = componentDidMountTemplate.bind(this);

.bind()返回一个新的绑定函数。您需要将该函数存储在一个值中，然后调用它。

现在您可以致电this.componentDidMountTemplate()

此外，只要您在函数旁边写()，该函数就会被调用

Answer 4

您可以绑定该函数，然后立即调用它：

componentDidMount() {
    (componentDidMountTemplate.bind(this))();
}

它由两部分组成 - 首先，将组件上下文绑定到函数（.bind(this)），然后再调用返回的函数。

Answer 5

你得到的错误是可疑的。虽然您似乎错误地使用bind，但我希望错误：Cannot read property 'bind' of undefined

你的componentDidMountTemplate是一堂课吗？我假设您要将其更改为某个功能，然后按照以下有关bind的建议。

如果要调用绑定功能，则需要()之后的bind()。否则，您正在调用未绑定的函数，然后尝试绑定从它返回的任何内容。

componentDidMount(){
    componentDidMountTemplate.bind(this)();
}

这意味着创建了一个新的绑定函数，然后立即调用

正如许多其他答案所暗示的那样，React组件通常最初绑定函数并存储对绑定函数的引用。但是在您的情况下，您可能只调用一次，因为componentDidMount生命周期方法只调用一次。

React Native - 将函数绑定到此

5 个答案: