Javascript 在react中是否可以强制一个组件在另一个组件内使用？

我想创建两个react组件

和

，并强制开发人员仅在

父
内部使用
子
：



有什么办法吗？如果是这样，我应该使用什么语法？
您可以这样做：

<Father>
  {React.cloneElement(this.props.children, {...this.props, dna: 'uniquefather'})}
</Father>

在这里，父亲将传递一个唯一标识符，如果未收到该标识符，将在子类中抛出错误。
您可以利用
上下文API
来确定孩子在父亲中是否有父亲

这样做的方法是让父组件呈现
ContextProvider
，让子组件使用上下文

const FatherContext = React.createContext(null); // default value used if father not in hierarchy

const Father = ({children}) => {
   // Component Logic here
   return (
       <FatherContext.Provider value={"Father"}>
        {/* rest content */
        {children}
       </FatherContext.Provider>
   )
}

现在，根据您使用的React版本，上下文的实现有所不同，但想法仍然相同
如果你想为开发人员创建一个模式，你应该研究一下
上下文
和
提供者
。我不认为这解决了OP有@shot的问题。在这种情况下，什么会阻止开发人员在每个外部使用
Father
？像这样使用上下文将是一种更干净的方法。
const FatherContext = React.createContext(null); // default value used if father not in hierarchy

const Father = ({children}) => {
   // Component Logic here
   return (
       <FatherContext.Provider value={"Father"}>
        {/* rest content */
        {children}
       </FatherContext.Provider>
   )
}

const Child = () => {
   const context = useContext(FatherContext);
   if(context == null) {
       console.warn("Child must be rendered inside of Father component"); // You can throw an error here too
   }

   return (...)
}