Question

我正在使用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;

我想要实现的是将源prop中的链接传递给Exercise组件内的iframe。

我不知道/无法找到的是你如何接受＆＃34;那些道具并在练习组件中使用它们。

*如果我需要附上任何其他信息以便明确此问题并与其他可能存在此问题的人联系，请告知我们。

Answer 1

如果你需要将一个道具传递给React router v4中的一个组件，那么这是以下方式。

没有道具的组件

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

带道具的组件

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

确保您不会错过第一个示例中组件与第二个示例中 render 之间的区别。如果在组件prop中使用这样的匿名函数而不是渲染它会导致很多组件挂载/卸载，这是你不期望的。

Answer 2

这条路线不是问题。

要在Exercise组件中使用源值，您需要执行以下操作：

<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;

如何在组件中传递/接收路径道具？

2 个答案: