如何在 Typescript 和 React JSX (TSX) 中使用 mixins答案

【问题标题】：How to use mixins with Typescript and React JSX (TSX)如何在 Typescript 和 React JSX (TSX) 中使用 mixins
【发布时间】：2017-05-06 04:23:30
【问题描述】：

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

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

【问题讨论】：

标签： reactjs typescript react-jsx tsx

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：