使用graphql在reactjs中渲染帖子的正确方法

时间:2019-01-14 04:13:15

标签: reactjs graphql

我正在使用reactjs和graphql做一个wordpress主题。我正在尝试制作这样的layout view

但是我无法通过将后置道具传递给三个我认为不是好方法的组件来找到更好的方法。

import React, { Component } from 'react';
import { graphql } from 'react-apollo'
import { getAllPosts } from '../graphql/queries/posts'
import Layout from '../component/Layouts';
import RenderPost from '../component/RenderPost';
import RenderPostExcerpt from '../component/RenderPostExcerpt';
import RenderAllPost from '../component/RenderAllPost';



class Home extends Component {
    render() {
        const posts = this.props.data.posts;
        console.log(posts);
        return (
            <Layout>
                {!posts && <h1>Loading...</h1>}
                {posts && 
                    <div>
                    <RenderPost posts={posts}/>
                    <RenderPostExcerpt posts={posts}/>
                    <RenderAllPost posts={posts}/>
                    </div>
                }
            </Layout>
        );
    }
}

export default graphql(getAllPosts)(Home);

我正在使用graphql从wordpress获取数据,这里Home.js是父组件。 还有其他方法吗?

0 个答案:

没有答案