ReactJS：如何将一个组件覆盖在另一个组件的元素之上？

Question

我刚刚开始反应。 我有一个组件，它有一个输入字段和一个按钮。 还有另一个组件返回 JSX（一个闪烁的点）。我正在导入主组件中的闪烁点组件，并希望在输入字段为空时将闪烁点覆盖在输入字段的顶部。

我怎样才能做到这一点？请帮助我。

此代码可在以下位置找到： https://stackblitz.com/edit/react-xmssdv

function App() {
  const [name, setName] = React.useState("");
  const inputChangeHandler = event => {
    setName(event.target.value);
    console.log(name);
  }

  return (
    <div>
        <input type="text" value={name} onChange={inputChangeHandler} />
      <div className="button">
        <button type="button">Click Me!</button>
      </div>

      <Dot />
    </div>
  );
}

Answer 1

通过以下两个更改可以轻松实现：
步骤 1. 在index.js 中将 Dot 组件移到顶部：

function App() {
  const [name, setName] = React.useState("");
  const [showDot, setShowDot] = React.useState(true);

  React.useEffect(() => {
    name ? setShowDot(false) : setShowDot(true);
  }, [name])

  return (
    <div>
        { showDot ? <Dot /> : null }
        <input type="text" value={name} onChange={() => setName(event.target.value)} />
      <div className="button">
        <button type="button">Click Me!</button>
         { name ? <Dot /> : null }
      </div>


    </div>
  );
}

步骤 2. 在Dot/dot.css 中引入 dot 作为绝对定位：

.Blink {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 50%;
  animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}