reactjs - 在 React 中设置 Medium Feed
问题描述
我正在尝试制作一个组件,列出我最近在 Medium 上的 3 篇文章。我希望它只列出帖子的标题并链接到帖子。
到目前为止,我有MediumItem
下面调用的 List Item 组件是我的设置方式:
import React from 'react'
import { ExternalLink } from "react-feather"
const MediumItem = (props) => (
<li><a href={props.url}>{props.title} <ExternalLink/></a></li>
)
export default MediumItem
我的提要设置如下:
import React from 'react'
import axios from 'axios'
import MediumItem from './mediumItem'
import { ExternalLink } from "react-feather"
class Medium extends React.Component {
state = {
posts: []
}
componentDidMount() {
this.fetchPosts().then(this.setPosts)
}
fetchPosts = () => axios.get(`https://cors-anywhere.herokuapp.com/https://us-central1-ryan-b-designs-medium-cors.cloudfunctions.net/medium?username=@RyanABrooks`)
setPosts = ({data}) => {
const { Post } = data.payload.references
const posts = Object.values(Post).map(({ id, title, uniqueSlug}) => Object.assign({}, {
title,
url: `https://medium.com/@RyanABrooks/${uniqueSlug}`
}))
this.setState({
posts
})
}
render() {
return (
<div>
<h3>Recent Articles</h3>
<ul>
{ this.state.posts.map(({posts}, i) =>
<MediumItem key={i} {...posts} />
)}
<li><a href="https://medium.com/@RyanABrooks">Read More <ExternalLink /></a></li>
</ul>
</div>
)
}
}
export default Medium
我无法弄清楚如何将 Title 和 URLs 传递给 MediumItem 组件,并确保它只列出最后 3 个项目。
解决方案
可能是这样的:
render() {
const last3 = this.state.posts.slice(-3);
{ last3.map((post, i) => // no need to use {posts} here
<MediumItem key={i} title={post.title} url={post.url} />
)}
}
假设每个帖子的结构为:
{
title: 'asdf',
url: 'https://asdf'
}
推荐阅读
- python - Pycharm 绘图窗口未使用“Agg”后端打开
- javascript - 在 Webpack 中使用 Stickit 和 Backbone
- ios - numberOfItemsInSection 用于 UIViewController Swift 内的多个 UICollectionView
- spring - 如何在spring boot中的静态位置添加目录和子目录
- react-native - VSCode 智能感知不适用于 ES6 导入?
- html - 用链接到生成的 SVG 图像的 IMG 标记替换 HTML 标记中的 LaTeX 公式
- webpack - 在模板页面上使用 webpack 中定义的函数
- .net - 在自定义目标内设置属性
- html - 使用 css last-child 改变边框
- angular - 在 Angular 2 中为非管理员用户隐藏 menuItem