reactjs - 如何在 Typescript 和 React JSX (TSX) 中使用 mixin

Question

我有一个用 Typescript 2.0.6 + JSX (TSX) 编写的 React 组件，它需要使用 LinkedStateMixin。如何在我的类定义中包含 mixin？我已经搜索了官方文档但没有成功。有没有办法在我的组件类中包含一个 mixin？

注意：我使用的是 ReactJS v0.14.6

Answer 1

我不知道你是否知道 mixins 的当前状态......所以： https ://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html

考虑更新到 React v15.4.0 并使用高阶组件。

你已被警告

顺便说一句，如果你真的需要它。安装这个 mixin:npm install react-addons-linked-state-mixin并做这样的事情来完成你想要的：

// choose one way :P
import LinkedStateMixin from 'react-addons-linked-state-mixin' // ES6
var LinkedStateMixin = require('react-addons-linked-state-mixin') // ES5 with npm
var LinkedStateMixin = React.addons.LinkedStateMixin; // ES5 with react-with-addons.js


var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

https://facebook.github.io/react/docs/two-way-binding-helpers.html#linkedstatemixin-before-and-after

Answer 2

不幸的是，React 已经正式摆脱了 mixin 模式：https ://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html 。如果你不使用 ES6 风格的 react 组件，你仍然可以使用它们。但是，如果你真的需要它，你可以使用这个库：https ://github.com/brigand/react-mixin