仅当条件在 Reactjs 中第二次运行时才显示水平线

Posted 2023-02-22

【中文标题】仅当条件在 Reactjs 中第二次运行时才显示水平线

【英文标题】：Show horizontal line only when condition runs for second time in Reactjs

【发布时间】：2020-11-11 13:54:43

【问题描述】：

当条件第二次呈现时，我试图显示水平线 <hr> 标记。例如，当数据第一次呈现时，我不想要<hr> 标签，但是当它第二次呈现时，我希望 hr 标签出现在两个数据之间。我试过但找不到任何东西。谁能帮我解决这个问题

  this.props.details && this.props.details.length > 0
    ? this.props.details.map((data) => (
        <>
          <div>data </div>
        </>
      ))
    : null;

【问题讨论】：

嗨，你喜欢 JS 的

即使我应用 css，我也希望它能够在第二次数据显示在 UI 上后进行渲染！

【参考方案1】：

您可以简单地维护一个状态，例如 isSecondRender 并将其设置为 false。在 componentDidMount 中，你可以将其设置为 true（即 2nd render）。

在jsx中，可以有条件地渲染hr标签。

Working demo

代码 sn-p

class MyComp extends React.Component 
  state = 
    isSecondRender: false
  ;

  componentDidMount() 
    this.setIsSecondRender();
  

  setIsSecondRender = () => 
    setTimeout(
      () =>
        this.setState(prev => (
          ...prev,
          isSecondRender: !prev.isSecondRender
        )),
      3000
    );
  ;

  render() 
    return this.props.details && this.props.details.length > 0 ? (
      <>
        !this.state.isSecondRender
          ? "first time rendering"
          : "second time rendering done"
        this.props.details.map(data => (
          <>
            <div> data </div>
            this.state.isSecondRender && <hr />
          </>
        ))
      </>
    ) : null;
  

export default function App() 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <MyComp details=["data-1", "data-2"] />
    </div>
  );