Reactjs 尝试在es6类中声明fluxible react.js组件时出错

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

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文档中介绍这个示例：

我是否正确声明了fluxible组件？它没有初始状态，因此看起来好像没有被调用

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;

从“React”导入React；
从“../stores/SearchStore”导入SearchStore；
从“./产品”导入产品；
类SearchResults扩展了React.Component{
静态上下文类型={
执行操作：需要React.PropTypes.func.isRequired，
getStore:React.PropTypes.func.isRequired
};
静态类型={
结果：React.PropTypes.array
};
静态defaultProps={
结果：[]
};
getInitialState（）{
返回这个.getStoreState（）；
}
getStoreState（）{
返回{
结果：this.context.getStore（SearchStore）.getResults（）
}
}
组件安装（）{
this.context.getStore（SearchStore）.addChangeListener（this.\u onStoreChange）；
}
组件将卸载（）{
this.context.getStore（SearchStore）.removeChangeListener（this.\u onStoreChange）；
}
_onStoreChange（）{
this.setState（this.getStoreState（））；
}
render（）{
var main；
if（this.state&&this.state.results&&this.state.results.length）{
让products=this.state.results.map（函数（产品）{
返回(
);
}，这个）；
主要=(

{产品}

);
}
返回(
搜索结果
{main}
);
}
}
导出默认搜索结果；

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

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

您可能还希望签出

connectToStores

，而不是像现在这样将其连接到商店。

---

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

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

您可能还希望签出

connectToStores

，而不是像现在这样将其连接到商店。 我决定这样做

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);
    }
}

我决定这样做

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);
    }
}

---

这就是我所想的，但是这里关于“访问存储”的示例实现了getInitialState（）函数，即使它正在扩展一个类。这是他们文档中的一个错误吗？另外，如果我想使用decorator模式，我需要在环境中导入或配置一些东西吗？我在使用@decorator时遇到语法错误如果你想使用decorator，你需要在第一阶段中使用babel

{“预设”：[“第一阶段”]}

在你的babelrcas中使用fluxible文档。事实并非如此。他们正在实现getStoreState，而不是GetInitialState。他今天早上刚刚根据下面的答案更新了fluxible文档。我是这么想的，但是这里关于“访问存储”的示例实现了getInitialState（）函数，尽管它扩展了一个类。这是他们文档中的一个错误吗？另外，如果我想使用decorator模式，我需要在环境中导入或配置一些东西吗？我在使用@decorator时遇到语法错误如果你想使用decorator，你需要在第一阶段中使用babel

{“预设”：[“第一阶段”]}

在你的babelrcas中使用fluxible文档。事实并非如此。他们正在实现getStoreState，而不是GetInitialState。他今天早上刚刚根据下面的答案更新了fluxible文档。直到现在它还在使用getInitialState。