Question

我在后台使用带有GraphQL插件的wordpress cms。前端反应。这是一个页面组件，用于我的wordpress中的所有页面。

当我尝试渲染图像时，我的应用程序似乎完全损坏。

我可以很好地打印图像src url。

我正在使用此样板代码，并将其添加到我自己的GraphQL端点中以获取数据。

        import React, { Component } from 'react';
        import { Redirect } from 'react-router-dom';
        import { graphql } from 'react-apollo';
        import gql from 'graphql-tag';
        import { sanitize } from '../commons/HtmlSanitizer';

        class Page extends Component {


          render() {
            const props = this.props;

            return (
              <div className="page">


                <h1>{(props.data.page.childPages) ? props.data.page.childPages.edges[0].node.title : '-'}</h1>

                <div id="page-content" className="content" dangerouslySetInnerHTML={{
                  __html: (props.data.page) ? sanitize(props.data.page.content) : ''
                }}></div>
              </div>
            );
          }

          componentDidUpdate() {
            let pageContent = document.getElementById('page-content');
            let links = Array.from(pageContent.querySelectorAll('a'));
            links.map( (node) => node.onclick = this.onLinkClicked.bind(this) );
          }

          onLinkClicked(event) {
            event.preventDefault();
            this.props.history.push(event.currentTarget.pathname);
          }
        }

        const GetPageBySlug = gql`
          query petPageBySlug($slug: String) {
            page: pageBy(uri:$slug) {
              id
              title
              slug
              date
              content
              childPages{
                  edges{
                    node{
                      id
                      title
                  }
                }
              }
            }
          }`;

        export default graphql(GetPageBySlug, {
          options: (props) => {

            let { slug, parent } = props.match.params;
            if (parent == "locations") {
              slug = `${parent}/${slug}`
            }
            if(parent == "pediatrics"){
              slug = `locations/${parent}/${slug}`
            }

            return {
              variables: {
                slug
              }
            }
          }
        })(Page);

Answer 1

这仅仅是因为您在尝试访问props.data.page时没有检查props.data.page.featuredImage是否存在。未定义props.data.page时，代码将崩溃，因为您正在尝试访问未定义对象上的属性。确保页面存在（甚至还可以确保还存在props.data.page.featuredImage）：

render() {
    const props = this.props;

    return (
      <div className="page">  
        <h1>{(props.data.page) ? props.data.page.featuredImage.sourceUrl : '-'}</h1>

        {props.data.page && <img src={props.data.page.featuredImage.sourceUrl} alt={props.data.page.slug} />}

        <div id="page-content" className="content" dangerouslySetInnerHTML={{
          __html: (props.data.page) ? sanitize(props.data.page.content) : ''
        }}></div>
      </div>
    );
  }

有关更多信息，请参阅conditional rendering的文档。

如何使用GraphQL显示道具图像？可以显示图片网址，但不能显示图片本身

1 个答案: