我有多个组件，它们都需要做同样的事情。（一个简单的函数，它映射到他们的子组件并对每个组件做一些事情）。目前我正在每个组件中定义这个方法。但我只想定义一次。
我可以在顶级组件中定义它，然后将它作为props传递下去。但这感觉不太对。它更像是一个库函数而不是一个props。（在我看来）。
这样做的正确方法是什么？
在 React 组件之间共享功能的正确方法
IT技术
reactjs
2021-04-06 01:19:17
6个回答
带有最新 Javascript ES6 语法的 Utils.js
创建Utils.js具有多个功能等的文件
const someCommonValues = ['common', 'values'];
export const doSomethingWithInput = (theInput) => {
//Do something with the input
return theInput;
};
export const justAnAlert = () => {
alert('hello');
};
然后在要使用 util 函数的组件中，导入所需的特定函数。您不必导入所有内容
import {doSomethingWithInput, justAnAlert} from './path/to/utils.js/file'
然后在组件中使用这些函数，如下所示：
justAnAlert();
<p>{doSomethingWithInput('hello')}</p>
如果您使用诸如browserify 之类的东西，那么您可以拥有一个外部文件，即 util.js 来导出一些实用程序功能。
var doSomething = function(num) {
return num + 1;
}
exports.doSomething = doSomething;
然后根据需要要求它
var doSomething = require('./util.js').doSomething;
如果要在辅助函数中操作状态，请遵循以下步骤：
创建 Helpers.js 文件：
export function myFunc(){ return this.state.name; //define it according to your needs }在组件文件中导入辅助函数：
import {myFunc} from 'path-to/Helpers.js'在您的构造函数中，将该辅助函数添加到类中
constructor(){ this.myFunc = myFunc.bind(this) }在您的渲染函数中使用它：
render(){ <div>{this.myFunc()}</div> }
下面是一些关于如何FetchUtil.handleError在 React 组件 ( App) 中重用函数 ( ) 的示例。
解决方案 1：使用 CommonJS module语法
module.exports = {
handleError: function(response) {
if (!response.ok) throw new Error(response.statusText);
return response;
},
};
解决方案 2：使用“createClass”（React v16）
util/FetchUtil.js
const createReactClass = require('create-react-class');
const FetchUtil = createReactClass({
statics: {
handleError: function(response) {
if (!response.ok) throw new Error(response.statusText);
return response;
},
},
render() {
},
});
export default FetchUtil;
注意：如果您使用的是 React v15.4（或更低版本），则需要createClass按如下方式导入：
import React from 'react';
const FetchUtil = React.createClass({});
来源：https : //reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass
组件（重用 FetchUtil）
组件/App.jsx
import Categories from './Categories.jsx';
import FetchUtil from '../utils/FetchUtil';
import Grid from 'material-ui/Grid';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {categories: []};
}
componentWillMount() {
window
.fetch('/rest/service/v1/categories')
.then(FetchUtil.handleError)
.then(response => response.json())
.then(categories => this.setState({...this.state, categories}));
}
render() {
return (
<Grid container={true} spacing={16}>
<Grid item={true} xs={12}>
<Categories categories={this.state.categories} />
</Grid>
</Grid>
);
}
}
export default App;
除了创建 util 文件之外，另一个可靠的选择是使用高阶组件来创建withComponentMapper()包装器。该组件将接受一个组件作为参数，并将其componentMapper()作为 prop 传递下来的函数返回。
这在 React 中被认为是一个很好的实践。您可以在此处详细了解如何执行此操作。