ReactJS,Javascript,使用状态更改导入函数的正确方法

时间:2018-01-17 17:32:23

标签: javascript reactjs react-native react-router react-redux

我的React组件中有这段代码。

我需要的是从其他文件中重用一些组件和功能。

但有些功能会更新我的状态。

我想知道实现这一目标的最佳实践是什么。

MyComponent primary:

import React, { Component, Fragment } from "react";

import { GenericFunction, GenericComponent } from "./functions.js";

class MyComponent extends Component {
  state = {
    myValueState: false
  };

  render() {
    const { myValueState } = this.state;

    return (
      <div>
        <GenericComponent
          GenericFunction={GenericFunction}
       // GenericFunction={GenericFunction.bind(this)} // -----> With this it works good, but is this a best practice?
        />
      </div>
    );
  }
}

export default MyComponent;

functions.js file:

export function GenericFunction(items) {
  if (items) {
    this.setState({ ...this.state, myValueState: true });
  } else {
    this.setState({ ...this.state, myValueState: false });
  }
}

GenericFunction={GenericFunction.bind(this)}这是一个好方法吗?

我听说过bind(this)的问题。我错了吗?

1 个答案:

答案 0 :(得分:3)

如果你的目的只是绑定函数,那么你只能在构造函数中这样做一次

class MyComponent extends Component {
  constructor(){
    super();
    // bind the function only once
    this.GenericFunction = GenericFunction.bind(this)
  }
  state = {
    myValueState: false
  };

  render() {
    const { myValueState } = this.state;

    return (
      <div>
        <GenericComponent
          GenericFunction={this.GenericFunction} // And use it like this
        />
      </div>
    );
  }
}