ReactJS 路由组件/渲染
Posted
技术标签:
【中文标题】ReactJS 路由组件/渲染【英文标题】:ReactJS Route Components/Render 【发布时间】:2020-03-23 22:08:45 【问题描述】:我创建了一个简单的预订应用程序,其中包含 3 个文件,App.js
、Booked.js
(第一个孩子)和 Details.js
(第二个孩子)
我正在尝试访问App.js
以使用第二个孩子(Detail.js
)删除数据,但我无法继续,因为它会引发
“TypeError: 无法读取未定义的属性‘状态’”
每当我尝试向路由组件添加功能以访问App.js
时
这是主页 https://i.stack.imgur.com/4PrM8.png 当我单击 Booked.js 中的数据时,我被重定向到 Details.js 以查看特定数据 https://i.stack.imgur.com/H2EnL.png 使用此代码,带有组件的 Route 可以工作
<Route path="/details" component=Details />
但是添加一个函数后给我一个错误
<Route path="/details" component= () => <Details delBook=this.delBook /> />
或
<Route path="/details" render=()=><Details delBook=this.delBook/>/>
Booking.js 中的链接
<Link
to=
pathname: "/details",
state:
id: booking.id,
fname: booking.fname,
lname: booking.lname,
email: booking.email,
ddate: booking.ddate,
ttime: booking.ttime
key=booking.id
style=linkStyle>
在引发错误的 Details.js 中。
state =
id: this.props.location.state.id,
fname: this.props.location.state.fname,
lname: this.props.location.state.lname,
email: this.props.location.state.email,
ddate: this.props.location.state.ddate,
ttime: this.props.location.state.ttime,
有人可以帮忙解释一下为什么会这样吗? 任何解决方案或替代方案? 蒂亚!
【问题讨论】:
【参考方案1】:您需要在将this
作为道具传递时绑定它。传递路由器的道具也是一个好主意:
<Route path="/details" component= (routerProps) => <Details delBook=this.delBook.bind(this) ...routerProps /> />
同样在Details.js
中,您应该直接使用props
,而不是使用this
:
class Details extends React.Component
constructor(props) // Use constructor to initialise `this` properly
super(props);
this.state =
id: props.location.state.id,
fname: props.location.state.fname,
lname: props.location.state.lname,
email: props.location.state.email,
ddate: props.location.state.ddate,
ttime: props.location.state.ttime
;
【讨论】:
感谢您提到routerProps
,它解决了我的问题,即如何将URL /:id
中的变量参数传递给您要路由到的组件,同时在属性中传递其他数据。 +1以上是关于ReactJS 路由组件/渲染的主要内容,如果未能解决你的问题,请参考以下文章
ReactJS:从 rails 传递参数以将路由器反应到组件