Question

使用FluxibleMixin我可以按预期访问组件中的executeAction和getStore方法。

使用没有Mixins的ES6样式组件类，我的顶级组件（在 react-router 下）按预期接收上下文，但对于子组件，我似乎必须明确要求组件上下文需求。

例如，在我的Application组件下，我有以下内容：

import React from 'react';
import setUserName from '../actions/setUserName';
import UserStore from '../stores/ProfileStore';
import {provideContext} from 'fluxible/addons';

/**
 *
 */
class Home extends React.Component {

    constructor (props) {
        super(props);
        this.state = props.state;
    }

    handleClick (event) {
        context.getComponentContext().executeAction(setUserName, {name:this.state.name});
    }

    handleNameEntry (event) {
        this.setState({name:event.target.value});
    }

    render () {
        return (
            <div>
                <h1>Enter your name to start</h1>
                <input type="text" onChange={this.handleNameEntry.bind(this)} />
                <input type="button" value="Find me" onClick={this.handleClick.bind(this)} />
            </div>
        );
    }
}

export default Home;

这是有效的，因为handleClick方法成功调用executeAction方法，但我不确定这是否正确。

当我想使用上下文方法时，是否需要显式调用context.getComponentContext()？

为什么context.executeAction可以直接在父组件上使用，而不是这个组件？

Answer 1

如果使用contextTypes显式请求它们，则只能在React类中直接使用上下文成员：

class Home extends React.Component {}

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

之后，您将能够从组件内部执行context.executeAction。您只应在顶级组件上使用一次provideContext。

子反应组件中的Fluxible context和executeAction

1 个答案: