您如何向知道其所包含概念的人(例如函数,变量等)解释JavaScript闭包,但不了解闭包本身?
我已经看过维基百科上给出的Scheme示例,但遗憾的是它并没有帮助.
随着react-router我可以使用Link元素创建的原生处理反应路由器链接.
我看到内部调用this.context.transitionTo(...).
我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做?什么是this.context?
我看到了Navigationmixin,但是我可以不用mixin吗?
据我所知,<Route path="/" component={App} />将提供App与路由相关的道具location和params.如果我的App组件有许多嵌套的子组件,如何让子组件无需访问这些道具:
我以为this.context.router会有一些与路线相关的信息,但this.context.router似乎只有一些功能来操纵路线.
这是导致我麻烦的文件:
var Routers = React.createClass({
getInitialState: function(){
return{
userName: "",
relatives: []
}
},
userLoggedIn: function(userName, relatives){
this.setState({
userName: userName,
relatives: relatives,
})
},
render: function() {
return (
<Router history={browserHistory}>
<Route path="/" userLoggedIn={this.userLoggedIn} component={LogIn}/>
<Route path="feed" relatives={this.state.relatives} userName={this.state.userName} component={Feed}/>
</Router>
);
}
});
Run Code Online (Sandbox Code Playgroud)
我试图将新的this.state.relatives和this.state.userName通过路线传递到我的"feed"组件.但我收到此错误消息:
警告:[react-router]你无法改变; 它会被忽略
我知道为什么会发生这种情况,但不知道我应该如何将状态传递给我的"feed"组件.在过去的5个小时里我一直在努力解决这个问题,而且我已经非常绝望了!
请帮忙!谢谢
下面的答案很有帮助,我感谢他们,但他们并不是最简单的方法.在我的情况下做到这一点的最好方法是:当您更改路线时,您只需将消息附加到它,如下所示:
browserHistory.push({pathname: '/pathname', state: {message: "hello, im a passed message!"}});
Run Code Online (Sandbox Code Playgroud)
或者如果你通过链接这样做:
<Link
to={{
pathname: '/pathname',
state: { message: 'hello, im a passed message!' }
}}/>
Run Code Online (Sandbox Code Playgroud)
来源: …
我在我的React应用程序中使用react-router v4和material-ui.我想知道如果GridTile在GridList中点击一下,如何更改URL .
我最初的想法是使用处理程序onTouchTap.但是,我可以看到重定向的唯一方法是使用组件Redirect或Link.如何在不渲染这两个组件的情况下更改URL?
我试过this.context.router.push('/foo')但它似乎没有用.
嗨,我想从一个页面移动到另一个页面,并通过参数search和type.我可以通过URL中没有这些参数的react路由器实现这一点吗?
我正在看这个https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments和使用的解决方案,<RouteHandler {...this.props}/>但是直到我将params传递给url它才能工作.
那有什么解决方案吗?
编辑1.路线:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</Route>
Run Code Online (Sandbox Code Playgroud) 我试图通过react-router将道具从一个组件传递到另一个组件.当我尝试从子组件获取道具时,我得到了这个消息TypeError: this.props.params.appState is undefined.这是我的代码:
Tracks.jsx:
import { observable } from 'mobx';
export default class Tracks {
@observable tracks = [];
}
Run Code Online (Sandbox Code Playgroud)
app.jsx:
.......
import Tracks from './store/Tracks.jsx';
......
const appState = new Tracks();
ReactDOM.render(
<Router history={browserHistory} >
<Route path="/" component={Login} />
<Route path="/dashboard" onEnter={authRequired} component={Main}>
<Route path="album/create" component={AlbumCreate} />
<Route path="album/:id" component={Album} appState={appState}/>
<Route path="album/:id/upload" component={Upload} />
</Route>
</Router>,
document.getElementById('app')
);
Run Code Online (Sandbox Code Playgroud)
Album.jsx:
.....
@observer
export default class Album extends React.Component {
constructor(props) {
super(props);
}
componentDidMount () { …Run Code Online (Sandbox Code Playgroud) 我喜欢将我的app入口点用作全局州商店.将信息传递给儿童作为道具.
使用react-router 4,如何将prop数据发送到渲染的组件.以类似的方式:
<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} />
Run Code Online (Sandbox Code Playgroud)
我已经看到了旧版本的react-router的一些janky变通办法,似乎已被弃用.
在v4中执行此操作的正确方法是什么?
我正在尝试使用React Router将props从我的app.jsx传递到我的路由组件之一,但是出现以下错误
TypeError:无法读取未定义的属性“ acc”
这是我的app.jsx中的代码:
<Route exact path='/FileUpload' acc={this.state.account} ethAdd={this.state.ethAddress} component={FileUpload} />
Run Code Online (Sandbox Code Playgroud)
路由中的组件中的代码导致:
constructor(props) {
super(props);
this.setState({
account: this.props.route.acc,
ethAddress: this.props.route.ethAdd
})
}
Run Code Online (Sandbox Code Playgroud)
我从这里阅读其他解决方案并不能真正理解在响应路由器中传递道具的工作原理,有人可以帮助我理解我需要做什么吗?
例如,我在 localhost:3000/ProductPage/014 上的 spa 中重定向,如何将“014”值添加到我的反应变量中?
<Route exact
path="/ProductPage/:id"
render={() => <ProductPage data={data} />}
/>
Run Code Online (Sandbox Code Playgroud) 我要获取其中的产品列表ProductList,其中需要将选定的产品对象传递给Product。
目前,我正在尝试将idas作为路由参数传递,并再次获取product对象。但我想将整个产品对象从发送ProductList到Product。
我的路线是
<Route path={joinPath(["/product", ":id?"])} component={Product} />
Run Code Online (Sandbox Code Playgroud)
ProductList组件链接
<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>
Run Code Online (Sandbox Code Playgroud)
如何传递产品对象Product作为道具?
下面的代码在Typescript中引发错误,表示LinkType 上不存在以下属性。
<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>
Run Code Online (Sandbox Code Playgroud)
我尝试了以下问题,但似乎没有问题。
<--- this is similar to my issue, but answer doesn't work for react-router v4react-router ×9
reactjs ×9
javascript ×7
closures ×1
function ×1
material-ui ×1
scope ×1
typescript ×1
variables ×1