Question

React的新手，并试图围绕如何创建和使用全局组件。

例如，我想创建一个可以在任何页面上触发的模态组件（使用{this.props.children}将其拉入父App组件中。）

所以我创建了一个模态组件：

class Modal extends React.Component {
    render() {
        if(this.props.isOpen){
                return (
                    <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                        <div className="modal">
                            {this.props.children}
                        </div>
                    </ReactCSSTransitionGroup>
                );
        } else {
                return <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={300} />;
        }
    }
}

在主App组件中，我可以打开/关闭Modal：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isModalOpen: false
        }
        this.openModal = this.openModal.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }
    openModal() {
        this.setState({
            isModalOpen: true
        });
    }
    closeModal() {
        this.setState({
            isModalOpen: false
        });
    }
    render() {
        return (
            <div className="container">
                <HeaderContainer />

                <p onClick={this.openModal}>Open modal</p>              
                <Modal transitionName="modal-anim" isOpen={this.state.isModalOpen}>
                    <p onClick={this.closeModal}>Close modal</p>
                </Modal>

                <div className="main-content">
                    {this.props.children}
                </div>
            </div>
        )
    }
}

同样在App组件中，render {this.props.children}正在拉出不同的页面（由路由器设置）。现在，从其中一个页面 - 我如何能够在父App上触发Modal并设置状态？

<Provider store={store}>
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />;
    <Route path="/features" component={FeaturesList} />
    <Route path="/magazine" component={Magazine} />
  </Route>
</Router>
</Provider>
, document.getElementById('react-root'));

具体来说，我如何能够调用openModal / closeModal并将数据从Magazine或FeaturesList组件传递给Modal组件？

感谢任何提示/建议，只需深入了解React并有很多需要学习的地方。 THX！

ReactJs创建全局可重用组件

0 个答案: