Question

我正在创建一个计时器应用程序。我有一个仪表板，用户可以控制计时器，现在我想要一个不同的窗口，其中只显示渲染时间的组件，以便记录程序捕获它。我尝试了以下内容：

在我的app.js

中

function MasterStopwatch(props) {
    return <span>{props.time}</span>
}
export { App, MasterStopwatch };

我正在传递app.js中的props.time

在我的index.js

中

import { App, MasterStopwatch } from './App';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/master" component={MasterStopwatch} />
  </Router>
  , document.getElementById('root')
);

但是当我访问主路线时，它什么也没显示，并且在控制台中没有显示错误。

任何帮助将不胜感激！

Answer 1

根据您的路线，MasterStopwatch应该是App的子组件。

如果您要将道具传递给MasterStopwatch，则需要从parentComponent App传递道具。

    export default class App extends React.component {
        ....
        ....
        render(){

           return(
           <div>
              <MasterStopwatch  {...props}/>
           </div>
          )
        }
     }

    export function MasterStopwatch(props) {
        return <span>{props.time}</span>
    }

Answer 2

按如下方式更改您的App和MasterStopWatch：

export default class App extends React.Component {
render() {
   return React.cloneElement(
        this.props.children, 
        {time: this.props.time}
    );
}

}

export default class MasterStopWatch extends React.Component {
render() {
   return <span>{this.props.time}</span>
}

}

来源：http://javascript.tutorialhorizon.com/2015/11/02/pass-props-to-handler-component-in-react-router/

在不同的文件中使用道具反应使用组件

2 个答案: