Help us understand the problem. What is going on with this article?

React0.13.0-beta.1でのComponentのES6 classでの継承とmixinが使えない理由

More than 5 years have passed since last update.

mixinが使えない理由

(訳)

残念ながらReactではES6 class向けにmixinをサポートするつもりはありません。これはJavaScriptの文法的なコンセプトの目的を台無しにしたくないからです。

(訳注: JavaScriptでは)普遍的なmixinの実現方法がありません。実際、いくつかのmixinをサポートする方法が、今のES6の仕様からはドロップしています。いろんなライブラリが様々なセマンティクスを持っています。私達はES6のクラスにmixinを実装するためにはあなたができることは一つだけであるべきだと考えています。Reactは、(訳注: 他のライブラリと違って)なにもしないことを決めました。

React v0.13.0 Beta 1 | React http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

JSXみたいな独自文法を作っといて今さら何をという気もするが、コレに関しては正しい姿勢な気はする。

継承を使う

mixin的な実装をするためにはどうしたらよいか? たぶんオブジェクト指向的に継承で解決するのを意図していると思う。

coffeeのclass記法はes6と互換なんで(というか仕様の策定時期的にこちらがインスパイア元だと思うが)、coffeeでやった

React = require 'react'

class ComponentBase extends React.Component
  componentWillMount: ->
    console.log 'bbb'

class A extends ComponentBase
  componentWillMount: ->
    super
    console.log 'aaa'

  render: ->
    React.createElement 'div', {}, 'hello'

console.log React.renderToString React.createFactory(A)({})
$ coffee scratch.coffee 
bbb
aaa
<div data-reactid=".cf68u4imtc" data-react-checksum="1161957053">hello</div>
plaid
CXプラットフォーム「KARTE」の開発・運営、EC特化型メディア「Shopping Tribe」の企画・運営、CX特化型メディア「XD(クロスディー)」の企画・運営
https://plaid.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away