如何在React路由器中包含道具回调
我是React新手，我正试图通过React路由器的道具，通过应用程序（父）将数据从子组件传递到子组件。据我所知，你必须将道具从一个孩子回调到另一个应用，然后再回调到孩子。
主要的问题是如何从孩子那里得到道具。js到应用程序。js与回调和反应路由器。
应用程序。js
class App extends Component {
constructor(props) {
super(props);
this.state = {
value_key: ""
}
}
resultCallback = (result) => {
this.setState({value_key: result});
console.log(result)
}
render() {
return (
<Router>
<div className="App">
<div className="container">
<Header/>
<Route path="/qr" component={QrReader} functionCallFromParent={this.resultCallback.bind(this)}/>
<Route path="/nfc" component={NfcReader}/>
<Output valueFromParent={this.state.value_key}/>
</div>
</div>
</Router>
);
}
}
小孩js
export class QrComponent extends Component {
state = {
result: 'No result'
}
handleScan = (data) => {
this.props.functionCallFromParent(data)
console.log('Callback from QrReader')
}
handleError = err => {
console.error(err)
}
render() {
return (
<div>
<QrReader
delay={300}
onError={this.handleError}
onScan={this.handleScan}
// onScan={this.handleScan}
style={{ width: '100%' }}
/>
</div>
)
}
}
共有1个答案
您当前正在将functionCallFromParent道具传递给路由组件。解决此问题的一种方法是包裹零部件并直接传递道具，如下所示：
<Route path="/qr" component={props => <QrReader functionCallFromParent={this.resultCallback.bind(this)} {...props} />} />
-
我对反应和试图理解如何传递道具很陌生。 首先，我设置了一个Navlink组件，该组件包含子类别属性： ，，都是从json文件中获取的，所以这部分是可以的。 每条路线的定义如下： 所以它呈现一个名为
-
我尝试使用react路由器将道具传递给组件，如下所示： 我如何做到这一点，但与反应路由器，我如何在组件本身使用它？ 我试过这个，但不起作用：
-
我正在使用react with react路由器。我正试图在react路由器的“链接”中传递属性 “链接”呈现页面，但不将属性传递给新视图。下面是查看代码 如何使用“链接”传递数据？
-
我试图在一个容器中获取反应路由器的当前路径，这样我就可以将其传递给一个子组件，该组件将更改它的可见性过滤器。 更具体地说，我试图使导航菜单突出当前活动的页面。 我正在使用redux、redux、react-router和react-router-redux，这样我就可以从redux存储访问路由器状态。 从react-router-redux的docs中，它说要做这样的事情： 以下是我的容器组件：
-
我有一个路由器像下面： 以下是我想要实现的目标： 如果未登录，将用户重定向到 如果用户在登录后试图访问，请将其重定向到root 因此，现在我尝试在
-
我正在获取中的产品列表，在其中，我需要将选定的产品对象传递给。 目前，我正在尝试将作为路由参数传递，并再次获取产品对象。但是我想将整个产品对象从发送到。 我的路线是 产品列表组件链接 如何将产品对象作为道具传递给？ 下面的代码在Typescript中抛出错误，表示