时间戳

首页 > 解决方案 > 子组件可以只呈现其父内容吗？

reactjs - 子组件可以只呈现其父内容吗？

问题描述

我正在扩展作为 SDK (AWS Amplify - SignIn) 一部分的父组件，我无法控制它。我只需要做一个小改动，在将输入字段数据修改为小写字母之前，它会被传递给身份验证函数。

import React from "react";
import { SignIn } from "aws-amplify-react";

export class CustomSignIn extends SignIn {
  constructor(props) {
    super(props);
    this._validAuthStates = ["signIn", "signedOut", "signedUp"];
  }

  showComponent(theme) {
    return (
      <div>My child component that I don't need to render</div>
    );
  }
}

export default CustomSignIn;

这更像是一个与 AWS Amplify 没有特别相关的一般性问题，但我想使用来自父级的现有 UI/渲染代码——有没有办法简单地显示父级的渲染内容而没有任何子内容？

标签： reactjsinheritanceaws-amplify

解决方案

您可以扩展一个组件并使用该组件的渲染功能。

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

class MyComponent extends ComponentFromThirdParty {
  componentDidMount() {
    console.log(
      "MyComponent was mounted and I render the same as ComponentFromThirdParty"
    );
  }
  render() {
    return super.render();
  }
}

MyComponent安装时会渲染它。

This is ComponentFromThirdParty

推荐阅读