javascript - 我怎样才能只允许 React 组件的单个实例存在？

Question

我正在尝试在 React 中构建一个功能。

问题是这样的:我有三个组件 ComponentA、ComponentB、ComponentC。 ComponentC 可以呈现为 ComponentA 或 ComponentB 的子项。

我想要实现的是，在任何时候，DOM 中都只有一个 ComponentC 实例，可以是 ComponentA 或 ComponentB 的子实例，两者始终存在。

class ComponentA extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentB extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentC extends Component {
  render() {
    return (
      <div>This is ComponentC </div>
    );
  }
}

我尝试构建一种方法来卸载任何 ComponentC 实例(如果存在)，但未能成功。

Answer 1

用钩子(Hook)实现一个引用计数器就可以完成这项工作:

function Highlander(Component) {
  let immortals = 0
  return function(props) {
    const [onlyOne, thereIsOnlyOne] = React.useState(false)
    React.useEffect(() => {
      immortals++
      if (immortals === 1) {
        thereIsOnlyOne(true)
      }
      () => {
        immortals--
      }
    }, [])
    return onlyOne ? <Component { ...props}/> : <React.Fragment></React.Fragment>
  }
}

function Test() {
  return "test"
}

const OnlyOneTest = Highlander(Test)

ReactDOM.render(<React.Fragment>
  <OnlyOneTest />
  <OnlyOneTest />
  <OnlyOneTest />
</React.Fragment>, document.getElementById("react"));

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Starring Highlander 作为 HoC，它“单独”组成组件(获取 Highlander 引用资料？嗯)。