React组件间出现莫名空白的问题求助

问题详情 #

开发多组件小型Web应用，后端功能已完成，但各React组件之间出现莫名空白——仅组件间存在，并非所有div元素都会出现。已经尝试以下操作但问题仍未解决：

• 移除所有导入的CSS文件
• 逐个移除组件排查
• 检查组件标签之间的空白字符

App.js的返回代码片段如下：

return (
    <div>
      <NavBar
      defaultAccount = {defaultAccount}
      />
      <Landing
        defaultAccount= {defaultAccount}
        connectWalletHandler = {connectWalletHandler}
      />
      <Form
        optionValues = {optionValues}
        removeFormFields = {removeFormFields}
        handleOptionChange = {handleOptionChange}
        addFormFields = {addFormFields}
        setQuestion = {setQuestion}
        handleSubmitPoll = {handleSubmitPoll}
      />
      <Polls
        pollList={pollList}
        handleVote={handleVote}
      /> 
      {errorMessage}
    </div>
  );

实用排查方向 #

• 检查组件自身默认间距：很多UI组件库（比如AntD、Bootstrap）的组件自带margin/padding，哪怕没导入全局CSS，组件内部样式依然生效。用浏览器F12选中空白区域，定位到对应的元素，直接给组件加style={{margin: 0, padding: 0}}临时测试，或者在组件内部CSS里重置样式。
• 排查行内元素空白字符：如果组件内部返回行内元素（比如span、a），代码里的换行、空格会被解析成空白。可以尝试把组件标签连写（比如<NavBar .../><Landing .../>），或者给外层div加font-size: 0，再在组件内部重置font-size。
• 检查errorMessage渲染逻辑：{errorMessage}如果是空div或带换行的文本，也会产生空白。给它加条件渲染，比如{errorMessage && <div>{errorMessage}</div>}，确保无内容时不渲染任何元素。
• 重置浏览器默认样式：浏览器对body、div等元素有默认margin/padding，临时在index.html添加内联样式测试：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 检查组件根元素样式：比如NavBar的根div可能设置了margin-bottom，Landing的根div有margin-top，逐个打开组件文件查看根元素的样式设置，排查隐藏的间距。

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