ReactJS使用函数组件后网页显示空白问题求助

白屏问题是Call组件内的JSX语法错误导致的，React解析失败会直接中断整页渲染，其他组件可正常运行是因为仅该组件存在语法问题，具体错误点共2处：

• style 属性不符合JSX规范：JSX中style属性接收值为对象，不能直接写原生HTML的字符串格式，CSS属性名需要转为小驼峰命名。
• img标签语法错误：JSX中img是自闭合标签，不需要额外写</img>闭合标签，多余闭合标签会触发解析报错。

修复后可直接运行的Call组件代码 #

import React from "react";
function Call()
{
    return (
        <section className="footer-call-action">
            <div className="container">
                <div 
                    className="footer-call-action-inner bgs-cover"
                    style={{backgroundImage: 'url(assets/images/background/footer-call-action-bg.png)'}}
                >
                    <div className="row align-items-center">
                        <div className="col-lg-6">
                            <div className="footer-call-action-image rpt-60">
                                <img src="assets/images/footer/footer-call-action.png" alt="Call to Action" />
                            </div>
                        </div>
                        <div className="col-lg-5">
                            <div className="footer-call-action-content py-70">
                                <h2>Better data with a better Company</h2>
                                <a href="about.html" className="theme-btn style-eight mt-30">
                                    Learn click here <i className="fas fa-long-arrow-alt-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
export default Call;

补充说明 #

• 你贴的App.js代码没有语法问题，组件引入和调用的写法均正确，不需要修改。
• 如果替换代码后图片资源加载失败，检查资源路径是否正确，存放在public目录下的静态资源建议使用根路径开头，比如/assets/images/background/footer-call-action-bg.png，避免路由跳转时相对路径匹配错误。

内容的提问来源于stack exchange，提问作者Mohamed TRABELSI