Question

如何为我的ReactJS组件创建基类，我将为所有后代封装一些常见行为。

现在我至少有3个具有通用方法功能的类

  handleClick: function (e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    this.props.onClick(this.props.value);
  },

复制/粘贴。：（（（

来自C＃，我将所有内容分成最小的部分，这真让我烦恼。

理想情况下，我希望在基类中有这样的方法

  handleClick: function (e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    onClick(); // this method would be virtual in base class and overridden in children classes
  },

是否有可能在ReactJS中实现这一目标？或者ReactJS或JavaScript世界中这种功能的另一种最佳方法是什么？

THX

Answer 1

您是否考虑过使用React Mixins。

这将允许您集中定义功能，只需 mixin 即可。

var HandleClickMixin = {
  handleClick: function (e) {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    this.props.onClick(this.props.value);
  }
};

然后可以使用：

var SomeReactComponent = React.createClass({
  mixins: [HandleClickMixin],
  render: function() {
    return (
      <button onClick={this.handleClick}>
        Click Me.
      </button>
    );
  }
});

您仍然需要提供 onClick 和值道具，否则它只是一行添加。

Answer 2

我认为它更像是一个处理点击的实用功能，那就是说，有很多方法可以做到这一点。假设我们在名为utils.js的文件中有一个实用程序函数：

// utils.js
export function someUtilityFunction (a) {
  return axios.all(players.map(function (username) {
    return getUserInfo(username)
  }))
  .then(function (info) {
    return info.map(function (user) {
      return user.data
    })
  })
  .catch(function (err) {console.warn('Error in func: ', err)})
};


Then in another file, lets say Main.js:

// Main.js
import { someUtilityFunction } from from '../utils/';

// someUtilityFunction is now available in this file

请注意导出和导入关键字。

上面我使用的是ES6语法，需要将其转换为浏览器的ES5（我使用babel.js）;

看一下这些文档，看看ES5和ES6中的变体：

MDN docs on export

Answer 3

多种方式

ES6类：如果您正在使用ES6类，则可以从extends Component创建react的基类，然后从此基类扩展组件

上下文：如果您查看react-router，您可以获得更多实现细节，但简而言之，context由所有子孙共享，因此您可以创建基本组件，然后传递方法给孩子们。

Answer 4

在ReactJS世界中，通常优先使用组合模式而非经典继承。

在您的情况下，您可以使用高阶组件模式（在this post by Dan Abramov中有很好的解释），如下所示：

// higher-order component creator:
function getClickHandlerComponent(OriginalComponent) {

    const ClickHandlerComponent = React.createClass({
        handleClick: function(e) {
            e.stopPropagation();
            e.nativeEvent.stopImmediatePropagation();
            this.props.onClick(this.props.value);
        },
        render: function() {
            return (
                <OriginalComponent
                    {...this.props}
                    handleClick={this.handleClick}
                />
            );
        },
    });

    return ClickHandlerComponent;  // higher-order component (HOC)
}

// Used like this:
const SomeButton = getClickHandlerComponent(React.createClass({
    propTypes: {
        // original props,
        handleClick: React.PropTypes.func.isRequired,  // added by the HOC
    },
    render: function() {
        return (
            <input
                type="button"
                value="Click me"
                onClick={this.props.handleClick}
            />
        );
    },
}));

高阶组件（此处为“handleClick”处理程序）提供的功能可以添加到任何需要它的组件中：组件只是在其道具中接收它。

如何为ReactJS类创建基类

4 个答案: