我的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)
的问题。我错了吗?
答案 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>
);
}
}