在反应中从父组件调用子组件的方法是反模式吗？为什么？

我正在尝试实施一个具体的Wizard用户可以使用以下模式使用的组件。

<Wizard {...wizardProps} onFinish={this.handleFinish}>
    <WizardStep onValidate={() => this.componentARef.isValid()}>
        <ComponentA onRef = { ref => (this.componentARef = ref)}/>
    </WizardStep>

    <WizardStep onValidate={() => this.componentBRef.isValid()}>
        <ComponentB onRef = { ref => (this.componentBRef = ref)}/>
    </WizardStep>

    <WizardStep onValidate={() => this.componentCRef.isValid()}>
        <ComponentC onRef = { ref => (this.componentCRef = ref)}/>
    </WizardStep>
</Wizard>

现在考虑反应方式，我们不能/不应该从父组件调用子组件的方法。在这里我想保留一个isValid每个组件中的方法将从父级调用Wizard单击时的组件Next/Finish按钮。 React 方式建议将状态和逻辑移动到父组件。但这样我将无法重用相同的组件，例如ComponentA在任何其他向导或任何其他地方，否则我将不得不在每个正在使用的父组件中复制验证逻辑ComponentA. Using ref or 这种方法 https://github.com/kriasoft/react-starter-kit/issues/909#issuecomment-252969542我可以轻松访问子组件的方法（isValid).

截至今天（React 版本 16.6），我没有看到在 React 中根据需要使用此模式有任何陷阱。在反应中使用这种模式可能会遇到什么问题？在这个特定的例子中是否有更好的选择，我可以使用它isValid步骤组件中的方法（例如ComponentA）以供重用？

简短回答

Yes.

长答案

From React 的 refs 文档 https://reactjs.org/docs/refs-and-the-dom.html:

在典型的 React 数据流中，props 是父组件与其子组件交互的唯一方式。要修改子项，您可以使用新的道具重新渲染它。

您的第一个倾向可能是使用 refs 在您的应用程序中“让事情发生”。如果是这种情况，请花点时间更仔细地思考状态应该在组件层次结构中的哪个位置拥有。

创建 Ref 是为了在特定用例（焦点、文本选择、媒体播放、第三方库等）中访问 DOM，但在尝试使其他组件执行操作时应避免使用它们。

因此，你当然可以拥有一个在使用 refs 调用子组件方法时工作的 React 应用程序，但是，是的，这是非常反模式的。