Question

我希望在url呈现该组件时刷新传递道具到组件。

class Logo extends React.Component {
    render(){
        return <img className="center" {...this.props} />;
    }
  }

  Logo.propTypes = {
      src: React.PropTypes.string.isRequired
  };

  class Label extends React.Component {

     handleRedirectToMyLogo() {
        this.context.router.push('/hello');
     },

    render() {
        return
        <div>
            <p className="default-label"> Hello World</p>
            <button
            type          = "button"
            name          = "myAcc"
            onClick       ={this.handleRedirectToLogo}>  
            My Logo
           </button>
       </div>;
    }
  }

这是我的主要成分

module.exports   = React.createClass({

    getInitialState() {
        return {
         logo:"intialized logo object with src url and dimension"
        };
    },

    content() {

        if (this.props.children) {
            return React.cloneElement(this.props.children, { src : this.state.logo.src });
        } else {

            return (
                <div>
                  <Header/>
                  <div className = "container">
                    <div className = "row">
                      <div id = "content" >
                         Main component
                      </div>
                    </div>
                  </div>
                </div>
            );
        }
    },

    render() {
        return (
               <div>
                   {this.content()}
                   <Footer />
               </div>
        );
    }

});

此 routes.js 文件

module.exports = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <Route path="/hello" component={Logo} />
      <Route path="/label" component={Label} />
    </Route>
  </Router>
);

我在主要组件链接上在网址/hello上呈现上面的组件，并从主要组件传递所需的道具。第一次正确渲染但当我刷新网址/hello时，组件会被渲染，但徽标中缺少道具。

请指导我完成这个。我正在使用 react-router v2.4并反应v 0.15 。

当url呈现该组件时，如何在组件刷新时保持传递道具到组件？

0 个答案: