Question

我的基础代码包含许多组件，并且有许多项目依赖于基础。

某些项目需要带有一些自定义功能的基本组件，所以如何覆盖react组件？

示例：

组件A

import React from 'react';

function ComponentA() {
  return (
    <div className="compnent-A">
       {/*render here many components & html structure */}
        <div>{ComponetADesc}</div>
        {/*render here many components & html structure */}
    </div>
  );
}
export let ComponetADesc="Hello This is component A"
export default ComponentA;

组件A替代

import ComponentA,{ComponetADesc} from './ComponentA'

 ComponetADesc="Hello This is component A Overrid"

export default ComponentA

但是此代码不起作用，那么我该怎么办？最好的方法是什么？

Answer 1

如果您只需要单独覆盖样式，请使用样式化组件。

https://www.styled-components.com

const compAStyled = styled.(ComponentA)

如果您需要覆盖行为，则不确定基本组件是否想要覆盖行为是哪一个，应该仅通过props和/或context来实现。

如何在React上覆盖部分组件

1 个答案: