你如何在組件中傳遞/接收路徑道具？

我正在用create-react-app構建一個簡單的應用程序，以便我可以學習React。你如何在組件中傳遞/接收路徑道具？

我index.js文件看起來像這樣：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from "react-router"; 
import './index.css'; 
import Exercise from './Exercise'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
<Router history={browserHistory}> 
    <Route path="/exercise1" component={Exercise} source={'https://hyperlinkgoeshere.com'} /> 
</Router>, document.getElementById('root')); 
registerServiceWorker();

我Exercise.js組件看起來是這樣的：

import React, { Component } from 'react'; 
import './App.css'; 

class Exercise extends Component { 
render() { 
return(
<div className="exercise"> 
<iframe scrolling='no' title='exercise' src='' frameBorder="no" allowFullScreen></iframe> 
</div> 
export default Exercise;

我想要實現的是通過該鏈接在源組件內的內部框架內。

我不知道/無法知道的是，您如何「接收」這些道具並在鍛鍊組件中使用它們。

*如果我需要附加任何其他信息以清除此問題並與其他可能有此問題的人聯繫，請告訴我。

來源

2017-08-31 David Asmosis

您可以編輯並給我們至少部分index.js的代碼。在這裏幫助你會容易得多。 –

@VlatkoVlahek我已經格式化了我的問題。希望有所幫助！ –

當然，請檢查下面的答案。 –

你的路線不是這裏的問題。

爲了在你的運動組件使用的源值，你需要這樣做：

<iframe scrolling='no' title='exercise' src={this.props.route.source} frameBorder="no" 
allowFullScreen></iframe>

所以，你index.js應該是這樣的：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from "react-router"; 
import './index.css'; 
import Exercise from './Exercise'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
<Router history={browserHistory}> 
    <Route path="/exercise1" component={Exercise} source={'https://hyperlinkgoeshere.com'} /> 
</Router>, document.getElementById('root')); 
registerServiceWorker();

和您的Exercise.js應該看起來像這樣：

import React, { Component } from 'react'; 
import './App.css'; 

class Exercise extends Component { 
render() { 
return(
<div className="exercise"> 
<iframe scrolling='no' title='exercise' src={this.props.route.source} frameBorder="no" allowFullScreen></iframe> 
</div> 
export default Exercise;

來源

2017-08-31 15:12:31 user19380947

如果您需要將一個道具傳遞給React路由器v4中的組件，那麼這是以下方法。

組件沒有道具

<Route path="/exercise1" component={Exercise} />

組件道具

<Route path="/exercise1" render={(props) => <Exercise {...props} source={source} />} />

確保你不會錯過第一個例子組件之間的差異，渲染在第二個o東北。如果您在組件prop中使用類似這樣的匿名函數，而不是渲染它，則會導致大量的組件安裝/卸載，這是您不期望的。

來源

2017-08-31 14:28:54

但是，我如何參考練習組件內的源屬性？我也爲組件添加了代碼，但似乎執行src = {this.props.source}這樣的操作不起作用。 –

你如何在組件中傳遞/接收路徑道具？

回答

相關問題