子反应组件中的可变上下文和 executeAction

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。