ReactJs 全局辅助函数

IT技术 function components reactjs global-methods
2021-05-08 12:33:51

问题：我有很多小的辅助函数，它们不一定需要存在于组件中（或者它们可以，但它们会使该组件因大量代码而变得臃肿）。我懒惰的一面只想让所有这些都存在只是组件可以调用的某种全局函数。我真的很想制作好的 ReactJs 代码。

问题：Reactjs 中全局辅助函数的最佳实践是什么？我应该强迫它们进入某种组件还是只是将它们推入其他组件？

基本示例：

function helperfunction1(a, b) {
    //does some work
    return someValue;
}

function helperfunction2(c, d) {
    //does some work
    return someOtherValue;
}

function helperfunction3(e, f) {
    //does some work
    return anotherValue;
}

function helperfunction4(a, c) {
    //does some work
    return someValueAgain;
}


var SomeComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });

var SomeOtherComponent =
    React.createClass({

        //Has bunch of methods

        //Uses some helper functions

        render: function () {

        }

    });
4个回答

您可以从一个文件中导出多个函数，本身不需要 React：

Helpers.js：

export function plus(a, b) {
  return a + b;
}

export function minus(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

然后你可以导入你需要的函数：

import { multiply, divide } from './Helpers'

为此，您可以使用module捆绑工具，例如Webpack或Browserify。将您的可重用函数放在 CommonJS module中。

不要使用 Mixins，它们可能会在 React 的下一个版本中被弃用，因为在 React 中没有使用 ES6 语法声明 mixin 的标准方法，而且他们更愿意等待可能标准化 mixins 的 ES7。除非它使用 React 生命周期的方法，否则将你的可重用代码耦合到 React 是没有意义的。

你可以使用modulejs。或者你可以使用 mixins ( https://facebook.github.io/react/docs/reusable-components.html#mixins )

混合示例：https : //jsfiddle.net/q88yzups/1/

var MyCommonFunc = {
    helperFunction1: function() {
       alert('herper function1');
    },
    doSomething: function(){
        alert('dosomething');
    }
}

var Hello = React.createClass({
    mixins: [MyCommonFunc],
    render: function() {
        this.doSomething();
        return <div onClick={this.helperFunction1}>Hello {this.props.name} </div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

另一种选择，如果你不想拆分成一个单独的module，你可以在你的父组件中创建一个私有方法，如下所示，并在这个组件中自由使用或通过 props.. 传递给子组件。

var YourComponent = React.createClass({

    globalConfig: function() {
        return {
            testFunc: function () {
                console.log('testing...');
            },
        };
    }(),

    ......
    render: function() {
        this.globalConfig.testFunc(); // use directly

        <ChildComponent testFunc={this.globalConfig.testFunc} /> // pass to child
    .....

一切都未经测试，但这就是想法......

其它你可能感兴趣的问题
上一篇在使用 react-router 更改路由之前获取数据 下一篇react - 对于某些输入而不是其他输入，“输入”上的“值”props不应为空