文本未在 React Web 应用程序中呈现答案

【问题标题】：Text not getting rendered in React Web Applications文本未在 React Web 应用程序中呈现
【发布时间】：2020-09-21 18:43:28
【问题描述】：

我正在尝试通过模块化 ColorLib 中的 Hookup 模板来构建个人 React Web 应用程序。但是，当图像正确显示时，React 不会在屏幕上渲染文本组件。正如我在检查 DevTools 时看到的那样，文本和相应的 CSS 样式被正确映射。

这是我的代码：

import React, { Component } from 'react'

export default class Details extends Component {
  render() {
    return (
    <section className="ftco-section ftco-about ftco-no-pt ftco-no-pb" id="groom-bride-section">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <div className="wrap">
                <div className="row d-flex">
                  <div className="col-md-6 d-flex">
                    <div className="img d-flex align-self-stretch align-items-center" style={{backgroundImage: 'url(images/about.jpg)'}}>
                    </div>
                  </div>
                  <div className="col-md-6 py-md-5 text">
                    <div className="py-md-4">
                      <div className="row justify-content-start pb-3">
                        <div className="col-md-12 ftco-animate p-4 p-lg-5 text-center">
                          <span className="subheading mb-4">Join us to celebrate <br />the wedding day of</span>
                          <h2 className="mb-4">Francisco <span>&amp;</span> Laura</h2>
                          <span className="icon flaticon-rose-variant-outline-with-vines" />
                          <span className="subheading">Which is celebration on</span>
                          <p className="time mb-4"><span>Dec | 28 | 2019</span></p>
                          <span className="subheading mb-5">Starting at 2:00 <br /> in the afternoon</span>
                          <span className="subheading mb-5">Saint John Paul Church <br /> in YorkNew.in</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    )
  }
}

感谢任何有关解决此问题的帮助。

【问题讨论】：

底部图片是你的组件的 DOM 截图，还是 Hookup 的截图？您可以检查“样式”旁边的“计算”选项卡，它会显示应用于该元素的所有 CSS 规则以及可能是什么样式。

标签： html css reactjs render

【解决方案1】：

我按照@Drew Reese 的建议检查了计算的样式，并且 {visibility: hidden, opacity: 0} 样式正在应用于文本。我所要做的就是覆盖相同的内容。感谢您的帮助！

【讨论】：