紫色线条/条件渲染答案

【问题标题】：Purple lines / Conditionnal rendering紫色线条/条件渲染
【发布时间】：2021-11-14 03:05:45
【问题描述】：

我有那些紫色线条（如下图所示）。

我做了一些条件渲染，我想知道是否可以删除所有那些紫色线条。

我听说删除所有 div 并添加 React.Fragments 可能会有所帮助，这是我迄今为止所做的。但问题仍然存在。

如果有人能说出问题出在哪里，我将不胜感激！

主视图/渲染 1

<div className="user-infos">
  <h4><u> Parameters </u></h4>
  { (componentState == "edit") ?
    <form > 
      <Render 3/>
    </form>
  : (componentState == "index") ?
     <Render 2/>
  : (componentState == "delete") ? 
     <React.Fragment>
        <p> Are you sure you want to leave us ? </p>
        <p> If yes, you have to type your email and press "confirm".</p>         
        <form>
          <input type="text" />
          <input type="submit" value="confirm email"/>
        </form>
        <span>
          <button> Delete ur account</button>
          <button> Cancel </button>
        </span>
      </React.Fragment>
    : ""
    }
  </div>

渲染 2

return (
    <React.Fragment>

        <p> Username : John </p>
        <p> Timezone : London </p>

        <span>
        <button> Edit Profile </button>
        <button> Delete account </<button>>
        </span>

    </React.Fragment>

渲染 3

return (
    <React.Fragment>
    
        <label for="email"> Username : 
          <input type="text"/>
        </label>

        <label for="text"> Timezone :
          <span>
          <select        
            onChange={options}        
          <options>
          </select>
          </span>
        </label>
     
        <button type="submit"> Save Profile </button>
        <button> Cancel </button>

    </React.Fragment>
  );

【问题讨论】：

你也可以添加你的 CSS 吗？

标签： css reactjs

【解决方案1】：

默认情况下，chrome 会为您的 html 添加样式。在 <p> 的情况下，它会将以下 css 添加到您的元素中。

如果您希望边距消失，您需要在 <p> 元素上设置 margin: 0; 以覆盖 chrome 的样式。

【讨论】：

【解决方案2】：

当元素有可用空间展开时，会出现紫色虚线。见here。根据我将 flexbox 与其他 display 类型的比较可以看出，紫色背景的紫色破折号专门用于 flexbox 内的空间（CSS 中的display:flex）。

需要查看您的 CSS 以确定，但我想有 justify-content: space-between 告诉 flexbox 在元素之间均匀分配剩余的空白空间以及 flex-direction: column 告诉 flexbox 垂直堆叠子元素。

如果是这种情况，您可以删除 justify-content: space-between 并使用 flexbox 样式将内容更改为您想要的外观。我发现这个网站很有帮助：A Complete Guide to Flexbox

【讨论】：