- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试重新使用我的一个 react 组件,我的 BlogPost 和 EditableBlogPost 组件都需要对后端进行提取以获取相同的数据。我喜欢使用高阶组件来执行此操作,但我不确定如何使用 react-router 来完成此操作,因为我正在直接路由到这些组件。 HOC 没有被触发,我无法在我想要的地方进行获取。理想情况下,路由器会呈现 HOC,然后将数据向下传递到我认为的 BlogPost 和 EditableBlogPost 组件?
代码:
首页.js
render () {
return (
<Switch>
<Route
exact
path={`${this.props.match.url}/:id`}
component={BlogPost} // id like to use a HOC here to fetch data and pass it down to the BlogPost but i cant do it from within this file.
/>
<Route
exact
path={`${this.props.match.url}/:id/edit`}
component={EditableBlogPost} // id like to use a HOC here to fetch the data as well and pass it down.
/>
<Route
exact
path={`${this.props.match.url}/new/post`}
render={() => {
return <EditableBlogPost isNew />
}}
/>
<BlogSummaryContainer posts={this.state.blogPosts} />
</Switch>
)
}
BlogPost.js
class BlogPost extends Component {
render () {
console.log(this.props.match.params.id)
console.log('this.props', this.props)
const { classes, title, content } = this.props
return (
<Card className={classes.card}>
<CardMedia
className={classes.media}
image='/static/images/cards/contemplative-reptile.jpg'
title='bang'
/>
<CardContent>
<Typography className={classes.title}>{title}</Typography>
<Typography variant='headline'>{title}</Typography>
<Typography className={classes.pos}>adjective</Typography>
<Typography variant='body1'>{content}</Typography>
</CardContent>
<CardActions>
<Button
size='small'
component={Link}
to={`${this.props.match.url}/edit`}
>
Edit
</Button>
</CardActions>
</Card>
)
}
EditableBlogPost.js
render () {
const { classes } = this.props
console.log(this.state)
return (
...other code...
</CardActions>
<Divider />
<Typography variant='headline'>Preview</Typography>
<CardMedia
className={classes.media}
image={this.state.file[0].preview}
title='bang'
/>
<CardContent>
<Typography className={classes.title}>
{this.state.title || 'Title'} // id like this to use props from HOC
</Typography>
<Typography variant='headline'>
{this.state.title || 'Title'}
</Typography>
<Typography className={classes.pos}>
{this.state.catchPhrase || 'CatchPhrase'}
</Typography>
<Typography variant='body1'>
{this.state.content || 'Content'}
</Typography>
</CardContent>
//this is where <BlogPost> should be instead of duplicating code.
...
)
BlogPostContainer.js(我正在尝试使用的 HOC)
class BlogPostContainer extends Component {
constructor () {
super()
this.state = { title: '', content: '' }
}
componentDidMount () {
fetch(`/api/posts/${this.props.match.params.id}`)
.then(res => {
return res.json()
})
.then(blogPost => {
// console.log('blogPost', blogPost)
this.setState({
title: blogPost.title,
content: blogPost.content
})
})
}
render () {
return <BlogPost title={this.state.title} />
}
如果我能够以某种方式向下传递获取的数据,我就可以删除 BlogPost 和 EditableBlogPost 之间共享的大量代码。也许我在这里做的事情根本上是错误的,但我不确定最好的方法是什么,感谢您的帮助。
最佳答案
似乎对 HOC 到底是什么存在一些误解。 HOC 是一个函数,它接受一个组件,然后返回一个组成该组件的新组件。 See this guide for more info.
// HOCs are usually written with `with` at the beginning
function withBlogPostData(WrappedComponent) {
return class BlogPostContainer extends React.Component {
constructor() {
super()
this.state = { title: "", content: "" }
}
componentDidMount() {
fetch(`/api/posts/${this.props.match.params.id}`)
.then(res => {
return res.json()
})
.then(blogPost => {
// console.log('blogPost', blogPost)
this.setState({
title: blogPost.title,
content: blogPost.content,
})
})
}
render() {
return <WrappedComponent title={this.state.title} />
}
}
}
// Create a new component like so
// This way, BlogPost can access the prop `title` given to it by the HOC
const BlogPostWithData = withBlogPostData(BlogPost)
// Then use it in your routes:
<Route component={BlogPostWithData} />
关于javascript - 使用 react 路由器 react HOC,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49602127/
使用 ui-router-ng2 有哪些优点和缺点?而不是新的 Angular2 路由器?过去我使用 ui-router 和 Angular 1.x 而不是使用 ngRoute,因为我需要更好地支持嵌
本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程,整体步骤与 一般安装流程 类似,但是由于 WR30U 的解锁 ssh 和刷机的过程中有一些细节需要注意,因此记录一下 解锁
我有路由器 { path: 'reset-password', component: ResetPasswordComponent, } 我希望能够将其作为直接链接 (/reset-passw
所以,我试图制作一个具有 Backbone 的示例应用程序,但我无法使路由器工作,对此有什么想法吗?谢谢。这是我的路由器 var Workspace = Backbone.Router.extend(
我正在研究分布式应用程序。网络基于ZMQ(jeromq),这是我的架构: N Clients (Dealer socket) (Router) Proxy (Dealer) 1 (Dealer)
In this plunk我有一个 ui-router $state.goto这仅在第一次有效,即使我增加了 seq变量以强制重新加载。看到时间戳没有改变。这段代码有什么问题? HTML G
我有面包屑组件,测试如下。测试应覆盖75%以上。测试失败,因为 ActivatedRoute.root.children 未定义。谁知道我该如何定义它?我需要至少一个 children 作为 root
我正在使用 RC5 和 "@angular/router": "3.0.0-rc.1" 我似乎无法捕捉到旧路线(示例): /category/subcategory/subcategory/artic
我确实有一个延迟加载模块,当我转到 /lazy 时默认加载 LazyLoadedComponent。到目前为止,没问题。 此组件包含 2 个路由器 socket : 模块有以下路由: const
我试图用不同的参数路由到当前页面,但没有成功。我有一个触发的组合框: this.router.navigate(['page', selectedId]); Url 正在更改,仅此而已。 如何使用不同
我正在尝试使用 React 路由器构建 SPA。当我使用链接导航时,它工作得很好,但是刷新或写入 url 时,它给我 cannot GET/(any route except main)。我试图将 h
我无法在我的 app.js 文件中添加样式。 div 在路线内不起作用。有没有其他方法可以在路由中添加样式? : } /> } /> }> } />
根据用户角色在 react-router 中有条件地呈现路由的最佳方法是什么。我有一个案例,并非所有角色都有权查看某些路线。而且我还需要处理子路线。因此,如果主要路线之一类似于/posts,我只希望
我想使用 Flash 的 RTMFP 对等协议(protocol),但我想知道它是否值得为主流受众开发?据我了解,它使用 UDP,除非用户的防火墙/路由器配置正确,否则它变得毫无用处。 这个问题有解决
我有一 strip 有 waitOn 的路线返回 Meteor.subscribe 的钩子(Hook).每次触发路线时,我都会从我的 loadingTemplate 中看到微调器在看到实际数据之前简要
所以我最近开始尝试使用 createMemoryHistory,因为我正在构建一个将在 iframe 中呈现的应用程序。幸运的是,单击 UI 按钮,我可以在不修改 url 的情况下四处导航。但是,当我
我在我的 React redux 应用程序中使用 connected-react-router。我需要服务器端渲染和客户端渲染(我通过 limenius react bundle 在 symfony
我是一名 ios 开发人员,并试图找出 viper 架构中的路由器和 coordinator 之间的区别。 我真的找不到明确的答案是协调器只是被认为是一种模式,所以路由器毕竟只是某种协调器还是它们有不
我想要这样的东西: if ($state.get("^")) $state.go("^"); else $location.path('/'); 但它显然不起作用(即使没有父状态,它也总是与 $sta
当我从 react-router-dom 使用 BrowserRouter 时,我的路由正在工作。但是为了使用自定义历史记录,我用来自 react-router 的 Router 替换了 Browse
我是一名优秀的程序员,十分优秀!