Reactjs Wordpress API+；反应段塞
首先，我找到了不同的答案，但没有一个是有效的 我使用WP作为无头。我可以正确显示帖子列表和帖子结果。但是如果我将slug传递给url而不是ID，我不能显示一篇文章的内容 域/帖子/10>作品 域/帖子/我的slug>不工作 下面是代码（我正在删除不必要的代码）： 主容器包装器：Reactjs Wordpress API+；反应段塞,reactjs,wordpress,axios,Reactjs,Wordpress,Axios,首先，我找到了不同的答案，但没有一个是有效的 我使用WP作为无头。我可以正确显示帖子列表和帖子结果。但是如果我将slug传递给url而不是ID，我不能显示一篇文章的内容 域/帖子/10>作品 域/帖子/我的slug>不工作 下面是代码（我正在删除不必要的代码）： 主容器包装器： import React, { Component } from "react"; import { BrowserRouter as Router, Switch, Rout
import React, { Component } from "react";
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Blog from './Blog';
import SinglePost from "../components/Blog/SinglePost";
class MainContainer extends Component {
render() {
return (
<Router>
<Header/>
<main>
<Switch>
<Route exact path="/blog" component={Blog}>
</Route>
<Route exact path="/posts/:slug" component={SinglePost}>
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</main>
</Router>
)
}
}
export default MainContainer;
import React, { Component } from 'react';
import axiosConfig from "../../axiosConfig";
import { Link, withRouter } from 'react-router-dom';
import renderHTML from 'react-render-html';
import Moment from 'react-moment';
import styled from "styled-components";
const Card = styled.article `
display:flex;
flex-wrap: wrap;
align-items: center;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
// background:${color.lightGrey};
margin-bottom: 2em;
`;
const MAX_LENGTH = 140;
class Posts extends Component {
constructor( props ) {
super( props );
this.state = {
loading: false,
posts: [],
error:''
}
}
componentDidMount() {
this.setState({loading:true}, () => {
axiosConfig.get(`/posts`)
.then( res => {
this.setState({loading: false, posts: res.data})
})
.catch( error => this.setState({loading:false, error: error.response.data}))
});
}
render() {
const { posts } = this.state;
return(
<div className="container">
{ posts.length ? (
<div>
{ posts.map( post => (
<Card key={post.slug}>
<Image>
<img src={post.images.medium} alt=""/>
</Image>
<Text>
<TextInner>
{/*Title*/}
<h2>
<Link to={`/posts/${post.slug}`}> { post.title.rendered } </Link>
</h2>
{/*Data*/}
<Moment locale={"pt"} format="LL">{post.date}</Moment>
{/*body*/}
{renderHTML(post.excerpt.rendered.substring(0, MAX_LENGTH))}
<Link className="btn" to={`/posts/${post.slug}`}>
Ver mais
</Link>
</TextInner>
</Text>
</Card>
))}
</div>
) : '' }
</div>
);
}
}
export default withRouter(Posts);
import React，{Component}来自“React”；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
从“./Blog”导入日志；
从“./components/Blog/SinglePost”导入SinglePost；
类MainContainer扩展组件{
render（）{
返回(
)
}
}
导出默认主容器；
import React, { Component } from "react";
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Blog from './Blog';
import SinglePost from "../components/Blog/SinglePost";
class MainContainer extends Component {
render() {
return (
<Router>
<Header/>
<main>
<Switch>
<Route exact path="/blog" component={Blog}>
</Route>
<Route exact path="/posts/:slug" component={SinglePost}>
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</main>
</Router>
)
}
}
export default MainContainer;
import React, { Component } from 'react';
import axiosConfig from "../../axiosConfig";
import { Link, withRouter } from 'react-router-dom';
import renderHTML from 'react-render-html';
import Moment from 'react-moment';
import styled from "styled-components";
const Card = styled.article `
display:flex;
flex-wrap: wrap;
align-items: center;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
// background:${color.lightGrey};
margin-bottom: 2em;
`;
const MAX_LENGTH = 140;
class Posts extends Component {
constructor( props ) {
super( props );
this.state = {
loading: false,
posts: [],
error:''
}
}
componentDidMount() {
this.setState({loading:true}, () => {
axiosConfig.get(`/posts`)
.then( res => {
this.setState({loading: false, posts: res.data})
})
.catch( error => this.setState({loading:false, error: error.response.data}))
});
}
render() {
const { posts } = this.state;
return(
<div className="container">
{ posts.length ? (
<div>
{ posts.map( post => (
<Card key={post.slug}>
<Image>
<img src={post.images.medium} alt=""/>
</Image>
<Text>
<TextInner>
{/*Title*/}
<h2>
<Link to={`/posts/${post.slug}`}> { post.title.rendered } </Link>
</h2>
{/*Data*/}
<Moment locale={"pt"} format="LL">{post.date}</Moment>
{/*body*/}
{renderHTML(post.excerpt.rendered.substring(0, MAX_LENGTH))}
<Link className="btn" to={`/posts/${post.slug}`}>
Ver mais
</Link>
</TextInner>
</Text>
</Card>
))}
</div>
) : '' }
</div>
);
}
}
export default withRouter(Posts);
import React，{Component}来自'React'；
从“../../axiosConfig”导入axiosConfig；
从“react router dom”导入{Link，withRouter}；
从“react render html”导入renderHTML；
从“反应力矩”导入力矩；
从“样式化组件”导入样式化；
const Card=styled.article`
显示器：flex；
柔性包装：包装；
对齐项目：居中；
盒影：0 3px 12px rgba（0,0,0,0.23），0 3px 12px rgba（0,0,0,0.16）；
//背景：${color.lightGrey}；
边缘底部：2米；
`;
const MAX_LENGTH=140；
类Posts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
员额：[]，
错误：“”
}
}
componentDidMount（）{
this.setState（{loading:true}，（）=>{
axioconfig.get（`/posts`）
。然后（res=>{
this.setState（{loading:false，posts:res.data}）
})
.catch（error=>this.setState（{loading:false，error:error.response.data}））
});
}
render（）{
const{posts}=this.state；
返回(
{posts.length(
{posts.map（post=>(
{/*标题*/}
{post.title.rendered}
{/*数据*/}
{发布日期}
{/*正文*/}
{renderHTML（post.extracpt.rendered.substring（0，最大长度））}
弗梅斯
))}
) : '' }
);
}
}
使用路由器导出默认值（POST）；
import React, { Component } from 'react';
import axiosConfig from "../../axiosConfig";
import { withRouter } from 'react-router-dom';
import renderHTML from 'react-render-html';
import Moment from 'react-moment';
import styled from "styled-components";
const MainArticle = styled.article `
display:flex;
flex-wrap: wrap;
align-items: center;
// background:${color.lightGrey};
margin-bottom: 2em;
`;
class SinglePost extends Component {
constructor( props ) {
super( props );
this.state = {
loading: false,
post: {},
error:''
}
}
componentDidMount() {
this.setState({loading:true}, () => { /* Changing this line for .params.slug do not work */
axiosConfig.get(`/posts/${this.props.match.params.id}`)
.then( res => {
this.setState({loading: false, post: res.data})
})
.catch( error => this.setState({loading:false, error: error.response.data}))
});
}
render() {
const { post } = this.state;
return(
<>
{ Object.keys( post ).length ? (
<div>
<MainArticle key={ post.slug }>
<TopImage>
<img src={post.images.large} alt=""/>
<h1>{ post.title.rendered }</h1>
</TopImage>
<Text>
<TextInner>
<h2>{ post.slug }</h2>
{renderHTML(post.content.rendered)}
{/*Date*/}
<Moment locale={"pt"} format="LL">{post.date}</Moment>
</TextInner>
</Text>
</MainArticle>
</div>
) : '' }
</>
);
}
}
export default withRouter(SinglePost);
import React，{Component}来自'React'；
从“../../axiosConfig”导入axiosConfig；
从“react router dom”导入{withRouter}；
从“react render html”导入renderHTML；
从“反应力矩”导入力矩；
从“样式化组件”导入样式化；
const main article=styled.article`
显示器：flex；
柔性包装：包装；
对齐项目：居中；
//背景：${color.lightGrey}；
边缘底部：2米；
`;
类SinglePost扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：false，
职位：{}，
错误：“”
}
}
componentDidMount（）{
this.setState（{loading:true}，（）=>{/*更改.params.slug的此行无效*/
axioconfig.get（`/posts/${this.props.match.params.id}`）
。然后（res=>{
this.setState（{loading:false，post:res.data}）
})
.catch（error=>this.setState（{loading:false，error:error.response.data}））
});
}
render（）{
const{post}=this.state；
返回(
{Object.keys（post.length）(
{post.title.rendered}
{post.slug}
{renderHTML（post.content.rendered）}
{/*日期*/}
{发布日期}
) : '' }
);
}
}
使用路由器导出默认值（SinglePost）；
axiosConfig.get('domain/posts/', { params: {slug: 'my-slug' } });
谢谢你，但不幸的是，这对我不起作用。get（'domain/posts/'，{params:{slug:'my slug'}}）；