尝试在 es6 类中声明我的 Fluxible react.js 组件时出错答案

【问题标题】：Error trying to declare my fluxible react.js component in an es6 class尝试在 es6 类中声明我的 Fluxible react.js 组件时出错
【发布时间】：2016-02-04 06:43:48
【问题描述】：

我在尝试使用 es6 类声明创建可流动组件时遇到此错误：

Warning: getInitialState was defined on SearchResults,
a plain JavaScript class. This is only supported for 
classes created using React.createClass. Did you mean 
to define a state property instead?

我将在 Fluxible docs 上关闭这个示例：

http://fluxible.io/api/components.html

我是否正确声明了我的可熔组件？它在没有初始状态的情况下出错，所以看起来它没有被调用。

import React from 'react';
import SearchStore from '../stores/SearchStore';
import Product from './Product';

    class SearchResults extends React.Component {

        static contextTypes = {
            executeAction: React.PropTypes.func.isRequired,
            getStore: React.PropTypes.func.isRequired
        };

        static propTypes = {
            results: React.PropTypes.array
        };

        static defaultProps = {
            results:[]
        };
        getInitialState () {
            return this.getStoreState();
        }
        getStoreState () {
            return {
                results: this.context.getStore(SearchStore).getResults()
            }
        }
        componentDidMount () {
            this.context.getStore(SearchStore).addChangeListener(this._onStoreChange);
        }
        componentWillUnmount () {
            this.context.getStore(SearchStore).removeChangeListener(this._onStoreChange);
        }
        _onStoreChange () {
            this.setState(this.getStoreState());
        }


        render() {

            var main;

            if (this.state && this.state.results && this.state.results.length) {
                let products = this.state.results.map(function (product) {
                    return (
                        <Product
                            key={product.id}
                            imageUrl={product.image_url_large}
                            description={product.description}
                            name={product.name}
                            maxPrice={product.price_max}
                            minPrice={product.price_min}
                        />
                    );
                }, this);

                main = (
                    <section id="results">
                        <ul id="todo-list">
                            {products}
                        </ul>
                    </section>
                );
            }

            return (
                <div>
                    <header id="header">
                        <h1>Search Results</h1>
                    </header>
                    {main}
                </div>
            );
        }

    }


    export default SearchResults;

【问题讨论】：

标签： reactjs fluxible

【解决方案1】：

对于 React 组件，您不应该使用 ES6 类样式的 getInitialState。相反，初始状态属于构造函数。

https://facebook.github.io/react/docs/reusable-components.html#es6-classes

API 与 React.createClass 类似，但 getInitialState 除外。您无需提供单独的 getInitialState 方法，而是在构造函数中设置自己的 state 属性。

您可能还想查看connectToStores，而不是像现在一样尝试将其连接到商店。 http://fluxible.io/addons/connectToStores.html

【讨论】：

这就是我的想法，但是fluxible.io/api/components.html 的“访问商店”示例实现了 getInitialState() 函数，即使它扩展了一个类。这是他们文档中的错误吗？
还有——如果我想使用装饰器模式，我必须在环境中导入或配置一些东西吗？我在使用 @ 装饰器时遇到语法错误
如果你想使用装饰器，你需要在你的 babelrc 中拥有第一阶段的 babel { "presets": ["stage-1"] }
对于可变文档。这不是真的。他们正在实现 getStoreState，而不是 getInitialState
他今天早上刚刚按照下面的答案更新了fluxible docs。直到现在它还在使用 getInitialState。

【解决方案2】：

我就这么决定了

class Tooltip extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
             handleOutsideClick: this.handleOutsideClick.bind(this)
        };
    }

    componentDidMount () {
         window.addEventListener('click', this.state.handleOutsideClick);
    }

    componentWillUnmount () {
         window.removeEventListener('click', this.state.handleOutsideClick);
    }
}

【讨论】：