使用React在WordPress文章中显示文章列表

在上一篇文章中，我们介绍了如何在 WordPress 中使用 React 程序，本篇文章以此为基础，进一步介绍在 WordPress 的一篇文章中使用 React 程序显示文章列表，文章的内容使用 Rest Api 获取。

首先安装 WordPress Rest Api React 客户端组件，使用下面的命令：

$npm install @wordpress/api-fetch –save

然后创建 React 组件 Posts，文件名是 getPosts.jsx。

getPosts.jsx

import React, { Component, useState, useEffect } from 'react';
import apiFetch from '@wordpress/api-fetch';


const Posts = () => {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        apiFetch( { path: '/wp-json/wp/v2/posts' } ).then( ( posts ) => {
        	setPosts( posts );
        } );
    }, []);
    return (
        <div>
            <h1>Post List</h1>
            <ul>
                {posts?.map((post, index) => {
                        return(
                            <li>{index} - {post.title.rendered}</li>
                        )
                    }
                )}
            </ul>
        </div>
    );
}
export default Posts

最后修改 App.jsx，输入并加载组件 Posts。

App.jsx

import Posts from './getPosts'
import './App.css'
function App() {
  return (
    <div className="App">
      <Posts/>
    </div>
  )
}
export default App

编译后，打开这篇文章，文章列表就显示在这篇文章相对应的显示区域内了。