直接向子组件嵌套的分解组件传递Props是否合规？

我想直接把props传给子组件内部的分解组件，不用先传给子组件再转发，以此简化流程、提升开发效率。目前实现后运行正常，但想确认：

• 这种做法是否合规？是否违反React相关规则？
• 若违规会引发什么问题？
• 若合规但属于不良实践，也请说明原因。

已知render props和useContext方案，代码示例如下：

export function ParentComponent() {
  const [myProp, setMyProp] = useState(false);

  return (
    <div>
      <ChildrenComponent>
        {/* 嵌套组件直接在这里接收props */}
        <DecompositionComponent myProp={myProp} setMyProp={setMyProp} />
      </ChildrenComponent>
    </div>
  );
}

1. 是否合规？违反React规则吗？ #

完全合规，没有违反任何React核心规则。React里的children本质就是组件树的一个普通props，你可以直接在父组件中渲染嵌套子组件并传递props，这完全符合React倡导的组件组合理念——官方一直鼓励用组合而非继承来复用组件逻辑，这种写法就是组合的常见形式之一。

2. 潜在问题与是否属于不良实践？ #

这种写法本身没问题，但在特定场景下会带来维护隐患，属于场景化的不良实践，具体问题如下：

• 破坏组件封装性：如果ChildrenComponent本身有布局逻辑、状态管理或样式约束，外部直接插入带props的DecompositionComponent，可能会绕过它的内部控制，导致组件行为不符合预期。比如ChildrenComponent原本会给所有子元素统一添加样式或事件监听，外部传入的组件可能无法继承这些逻辑。
• 提升耦合度：父组件需要同时知晓ChildrenComponent和DecompositionComponent的存在，一旦ChildrenComponent内部结构变更（比如不再支持直接嵌套该分解组件），父组件就得跟着修改，违背了“关注点分离”的原则。
• 代码重复风险：如果多个父组件都需要给DecompositionComponent传递相同props，这种写法会导致重复代码。而render props或useContext能更好地封装这些重复逻辑，让代码更简洁。

3. 什么时候适合用这种写法？ #

如果ChildrenComponent本身是纯容器组件（比如仅提供布局、样式的空壳，无复杂内部逻辑），这种写法完全没问题，反而能简化代码。比如ChildrenComponent只是一个带边框的div容器，直接在里面嵌套传props的组件会非常高效。

内容的提问来源于stack exchange，提问作者HackerMF