我对React还是相当陌生的(或者一般来说是前端开发,因为我是一个面向后端的开发人员),到目前为止,使用它进行开发通常没有任何问题。但是,我一直在寻找答案,以决定是否可以将在一个类中创建的函数(这些函数仅对该类特定)可以拆分为另一个文件并导入?
让我举个例子:
class ModuleInstance extends React.Component {
// Initial module counter
state = {
moduleIndex: this.props.index,
module: this.props.module,
params: {
single_assignment: this.props.module.assignments.length === 1 ? true : false,
weightError: false,
errorMessage: ''
},
}
componentDidUpdate(prevProps) {
if (this.props.assignments !== prevProps.assignments) {
this.setState({
params: {
...this.state.params,
single_assignment: this.state.module.assignments.length === 1 ? true : false
}
});
}
}
onRemoveModule = () => {
this.props.onRemoveModule(this.state.moduleIndex);
};
render() {}
...
在此示例中,我有一个自定义方法“ onRemoveModule”。事实是,我那里有很多“风俗”。当在render()中编写内容并查看其上方的函数时,当我需要上下滚动时,它变得很烦人。所以我的问题是-我可以将自定义函数导出到其他文件中,然后将其导入到该特定类中吗?
答案 0 :(得分:0)
种类繁多的反模式,但我想您可以做这样的事情:
import React from "react";
import { printName } from "./utils";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Bobby"
};
}
printName = printName.bind(this);
render() {
return (
<div>
<button onClick={this.printName}>Click</button>
</div>
);
}
}
export const printName = function() {
console.log(this.state.name);
};
仅记得在组件中定义一个方法以使用导入的函数并将其绑定。
例如参见codeandbox:https://codesandbox.io/s/sharp-tharp-e1oom
答案 1 :(得分:0)
在render()中编写内容并查看其上方的函数时,当我需要上下滚动时,这很烦人。
具有窗口分割功能(或并排打开同一文件的功能)的编辑器应该足够好;)将方法分离为文件几乎不会影响编辑。
我认为您应该了解[关注点]分离为'Presentational and Container Components'(通常在单独的文件夹中)的概念/模式(有点历史,但恕我直言仍然有效)。
可能您应该了解context API-状态和方法提供者。
onRemoveModule = () => { this.props.onRemoveModule(this.state.moduleIndex); };
可能您可以将此逻辑移到componentWillUnmount中-当父级仅停止呈现此组件时调用。重新定义此方法/处理程序也可能是过早的优化。
如果您更精确地描述模块管理和使用的结构/要求,也许我们可以提供比解决方案更合适的解决方案。