Правильный способ рендеринга поста в reactjs с использованием graphql

Я использую reactjs и graphql для создания темы wordpress. Пытаюсь сделать что-то вроде этого Правильный способ рендеринга поста в reactjs с использованием graphql

Но я не могу найти лучшего способа сделать это, передав реквизиты сообщения трем разным компонентам, что, на мой взгляд, не является хорошим способом.

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.info(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);

Я получаю данные из wordpress, используя graphql, здесь Home.js - родительский компонент. Есть ли другой способ сделать это?

posts - это массив данных post? RenderPost подразумевает отдельный пост, но похоже, что вы их все пропустите.

— 14.01.2019 05:29

да сообщения - это массив сообщений. внутри Renderpost.js я вырезаю первый пост из состояния покоя, а в другом файле я визуализирую остальную часть поста, кроме первого.

— 14.01.2019 05:33

Вы всегда нарезаете только первый пост? Что, если вы хотите отобразить вторую или третью публикацию?

— 14.01.2019 05:37

Я сделал что-то вроде этого posts.slice (0, 1) .map (post => ()) для первого сообщения и posts.slice (1, 5) .map (post => ()) для правой стороны сообщения, где Мне не нужно передавать imageurl, чтобы увидеть изображение. И я не уверен, что это правильно или нет, я впервые делаю что-то подобное.

— 14.01.2019 05:39

хорошо, но ... в любом случае, можете ли вы более четко сформулировать, чего хотите? Единственная проблема в том, что вы пишете posts = {posts} трижды?

— 14.01.2019 05:41

Я хочу знать, правильный ли это способ сделать это, поскольку я никогда не видел, чтобы что-то подобное передавало одни и те же реквизиты 3 разным компонентам.

— 14.01.2019 05:45

или есть ли другой способ, который можно использовать с redux. Я не уверена .

— 14.01.2019 05:46

Совершенно нормально. Можно было сделать по-другому, но не лучше. Я думаю, что в вашем коде было бы гораздо больше смысла не передавать все сообщения в RenderPost ... он должен взять одну опору под названием post или даже кучу постов и сделать <RenderPost {...post} /> или что-то в этом роде

— 14.01.2019 05:47

вы можете использовать redux, но это совершенно другое решение, не связанное с вашим вопросом. нет абсолютно ничего плохого в том, чтобы передать одну и ту же опору нескольким компонентам, это 100% обычное дело

— 14.01.2019 05:47

Хорошо, спасибо, я постараюсь передавать сообщения вместо сообщений каждому компоненту.

— 14.01.2019 05:49

reactjs graphql

14.01.2019 05:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...