Как передать данные в качестве реквизита компоненту страницы, чтобы использовать их повторно?

Question

Я новичок в Гэтсби и пытался понять это. У меня есть один компонент, который перебирает несколько узлов в файле .json и отображает изображения и текст.

В идеале я хотел бы передать компоненту (названному HeadlineAcross) данные из запроса GraphQL на компоненте страницы, а затем отобразить определенные элементы на странице. Вот что у меня есть в моем компоненте:

const HeadlineAcross = ( { headlineTitle } ) => {

const data = useStaticQuery(graphql`
query {
    allfeaturesJson{
        edges {
          node {
            img {
              childImageSharp {
                gatsbyImageData
              }
            }
            description
          }
        }
      }
    }           
`)

function getDetail(data) {
    const dataArray = []
    data.allfeaturesJson.edges.forEach((item) => {
        dataArray.push(
            <HeadlineAcrossRow>
                <HeadlineAcrossSingleImage>
                    <HeadlineAcrossImage image={getImage(item.node.img.childImageSharp.gatsbyImageData)}/>
                </HeadlineAcrossSingleImage>
                <HeadlineAcrossText>
                    <HeadlineAcrossHeading>{item.node.heading}</HeadlineAcrossHeading>
                    <p>{item.node.description}</p>
                </HeadlineAcrossText>
            </HeadlineAcrossRow>
        )
    })
    return dataArray
}

// return the elements here

}

Я хотел бы иметь возможность передать этому компоненту результат запроса данных в качестве реквизита, поэтому {headlineTitle, data}, а затем выполнить итерацию по нему. Это потому, что я могу затем одинаково форматировать несколько файлов Json и легко использовать один и тот же компонент. Но для этого мне нужно будет сослаться на «allfeaturesJson», как показано выше. Как мне это сделать?

Как передать данные в качестве реквизита компоненту страницы, чтобы использовать их повторно?

Ответы (0)