reactjs – React / Reflux：使用装饰器将带有mixins的类转换为E

发布时间：2020-12-15 05:05:32 所属栏目：百科来源：网络整理

导读：我正在尝试es6-ify以下React-Reflux代码： var TimeStore = Reflux.createStore({ listenables: [TimeActions],onTick: function(tick) { .... }})var Watch = React.createClass({ mixins: [Reflux.connect(TimeStore,'tick')],... Source 我不知道如何使用

我正在尝试es6-ify以下React-Reflux代码：

var TimeStore = Reflux.createStore({
    listenables: [TimeActions],onTick: function(tick) {
        ....    
    }
})

var Watch = React.createClass({
    mixins: [Reflux.connect(TimeStore,'tick')],...

Source

我不知道如何使用react-decorator转换它.这就是我将其转换为：

const SomeDecorator = MixinDecorator(
    'TimerActions',// displayName
    Reflux.connect(TimeStore,'tick')
);

@SomeDecorator
class Watch extends React.Component {
    ...

它与babel编译(舞台设置为0)但不能很好地工作.有任何建议如何解决这个问题？此外,是否有可能es6-ify商店？

完全跳过mixins.

class AppCtrlRender extends Component {
        binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

        render() {
            var data = this.state.Data;
            data = JSON.stringify(data,null,2);
            var data2 = this.state.Data2;
            data2 = JSON.stringify(data2,2);
            var data3 = this.state.Data3;
            data3 = JSON.stringify(data3,2);
            return (
                <div id='AppCtrlSty' style={AppCtrlSty}>
                    React 1.3 ReFlux with WebSocket<br/><br/>
                    {data}<br/><br/>
                    Data2: {data2}<br/><br/>
                    Data3: {data3}<br/><br/>
                </div>
            );
        }
    }

    function getState() {
        return {
            Data: BasicStore.getData(),Data2: BasicStore.getData2(),Data3: BasicStore.getData3()
        };
    };

    export default class AppCtrl extends AppCtrlRender {
        constructor() {
            super();
            this.state = getState();
            this.binder('storeDidChange');
        }

        componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange); }
        componentWillUnmount() { this.unsubscribe(); }
        storeDidChange() { this.setState(getState()); }
    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!