子反应组件中的灵活上下文和 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

上下文成员仅在 React 中直接可用类如果您使用 contextTypes 明确请求它们：

class Home extends React.Component {}

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

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

子反应组件中的灵活上下文和 executeAction

Fluxible context and executeAction in child react components

javascript

flux

reactjs

reactjs-flux