盖茨比 - 嵌套组件未呈现

Question

抱歉，如果有一个非常简单的解决方案，但构建网站不是我的专业领域。

我目前正在尝试创建一个 Gatsby 网站，其中我有一个组件嵌套在另一个组件中，但是当我尝试显示嵌套的组件时它显示一个完全空白的屏幕。根据的回答，我实现了一个 Layout 组件作为每个站点的模板。将来，我计划整理导航栏并将其实现到 Layout 组件中，但这是另一个问题。

我目前正在尝试将 Tile 组件放入我的 Layout 中，该组件也封装在我的 IndexPage 中，但是当我尝试运行它。我已尝试缩短代码，使其包含所需的最小数量。

我已经查看了我应该使用 GraphQL 的 Gatsby documentation and it appears that under the "Non-page components" 部分，但我不确定它是如何工作的。

我怀疑它不起作用的原因是 Tile 组件必须接受 imgLocation、altText 和 caption 属性，代码没有按预期工作。

代码：

index.js:

import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';

// markup
const IndexPage = () => {

    return (
        <Layout pageTitle="Home">
                <div id="main">
                    <div className="inner">
                        <h1>
                            <b>Portfolio</b>
                        </h1>
                        <p>
                            Here's all of the work that I've been commissioned to do over the past few years.
                        </p>
                        <h2>
                            <b>Christmas</b>
                        </h2>
                        <h3>
                            <b>Portrait</b>
                        </h3>
                        <section className="tiles">
                            <Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
                            <Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
                        </section>
                        <br />
                        <h3>
                            <b>Landscape</b>
                        </h3>
                        <section className="tiles">
                            <Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
                            <Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
                        </section>
                    </div>
                </div>
                {/* Footer */}
                <footer id="footer">
                    {/* footer goes here */}
                </footer>
        </Layout>
    )
}

export default IndexPage;

Tile.js（在与 index.js 相同的文件夹中）：

import React from "react";
import '../css/main.css';

const Tile = (props) => {
    const imgLocation = props.imgLocation;
    const altText = props.altText;
    const caption = props.caption;

    return (
        <article>
            <span>
                <img src={require({imgLocation}).default} alt={altText} onClick={() => {openModal(props)}} />
            </span>
            <br />
            <p>{caption}</p>
        </article>
    );
}

export default Tile;

Layout.js（在与 index.js 相同的文件夹中）

import * as React from 'react';

const Layout = ({pageTitle, children}) => {
    return (
        <main>
                <title>{pageTitle}</title>
                <meta charSet="utf-8" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, user-scalable=no"
                />
                {children}
        </main>
    )
}

export default Layout;

Answer 1

您在这里面临的问题是您的 Tile 组件位于您在此处指出的 /pages 文件夹中：

Tile.js (within the same folder as index.js):

因此，Gatsby 正在尝试基于 Tile 组件创建页面，因此，您正在尝试在页面内呈现页面。

将您的组件移动到另一个文件夹，例如 src/components/Tile，问题应该会消失。

Layout 组件也需要在 /pages 文件夹之外。

关于图片，尝试在父组件中导入并提升给子组件，如：

import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';

... 

<Tile imgLocation={'./path/to/your/image.png'} />

然后：

  <img src={imgLocation} alt={altText} onClick={() => {openModal(props)}} />

甚至直接钻取图像：

    import Img from './path/to/your/image.png'

   ...

    <Tile img={Img} />

然后：

const Tile = ({img:Img, altText, caption}) => {

    return (
        <article>
            <span>
            <Img />
            </span>
            <br />
            <p>{caption}</p>
        </article>
    );
}

export default Tile;

将 img 道具重新分配为 React 组件也应该可以解决问题

盖茨比 - 嵌套组件未呈现

Gatsby - Nestled Component Not Rendered

javascript

reactjs

gatsby