ReactJS 路由组件/渲染

Posted

技术标签:

【中文标题】ReactJS 路由组件/渲染【英文标题】:ReactJS Route Components/Render 【发布时间】:2020-03-23 22:08:45 【问题描述】:

我创建了一个简单的预订应用程序,其中包含 3 个文件,App.jsBooked.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 传递参数以将路由器反应到组件

为啥 ReactJS 不在另一个组件中渲染一个组件?

使用 ReactJS 的 Datatables.net,在一列中渲染一个 ReactJS 组件

reactjs路由器无法读取未定义的渲染

Reactjs 异步渲染组件

AJAX 调用 ReactJS 后渲染组件