Question

我需要为我的React组件创建逻辑的帮助。如果分隔线在页面上出现一次，则不应再次呈现。

因此，如果我将组件添加到页面，它将在下面设置文本样式。但是，如果我尝试将组件再次添加到页面，则分隔线/样式应被忽略。我应该只能添加一次

这是我的代码：

import React from 'react';
const Divider = () => (
  <>
    <hr className="divider"/>
  </>
);

/* Seperate css file */
hr.divider {
  height: 0;
  border: 0;
  border-top: solid 1px #cdcdcd;
}

hr.divider ~ p.story-text {
  font-size: 0.90rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1.75rem;
  color:#707174;
  @include text-styles(.75rem, 1.75em, "Gordita");
  @include breakpoint(tablet) {
    @include text-styles(.90rem, 2em, "Gordita");
  }
}

hr.divider ~ p.story-text:last-of-type {
  border-top: solid 1px red;
}

Answer 1

您需要使用ReactJS提供的组件LifeCycle工具。 ComponenDidMount()仅在加载类时加载一次，但在用户或应用程序的每个操作上都会调用render()函数。这是一个指向ReactJS文档的链接，该文档告诉您如何使用ComponentDidMount()：https://reactjs.org/docs/react-component.html#componentdidmount

Answer 2

最好在父组件（调用Divider的组件）中添加一个条件，但要考虑到当前的摘要：

const Divider = () => (
  let dividers = document.getElementsByClassName('divider')
  if (dividers.length > 0) {
    return null
  } else {
    return <hr className="divider"/>
  }
);

这将不会阻止您的组件渲染。它只会停止渲染多个hr。

仅一次渲染一个组件的逻辑

2 个答案: