如何在 React 上覆盖部分组件答案

【问题标题】：How to override part of component on React如何在 React 上覆盖部分组件
【发布时间】：2020-02-04 23:06:05
【问题描述】：

我有基础代码包含很多组件，我有很多项目依赖于基础。

有些项目需要自定义一些基础组件，那么如何覆盖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

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

【问题讨论】：

可能已经在这里回答了：stackoverflow.com/questions/49706823/… 和这里stackoverflow.com/questions/38614897/…
我想你正在寻找 renderProps reactjs.org/docs/render-props.html。通过在 base 中指定布局并让详细组件实现 renderProps，您将获得所需的结果。

标签： reactjs

【解决方案1】：

如果您只需要单独覆盖样式，请使用 Styled-Components。

https://www.styled-components.com

const compAStyled = styled.(ComponentA)

如果您需要覆盖行为，我不确定是哪一个，就好像基础组件想要覆盖行为一样，它应该只能通过道具和/或上下文。

【讨论】：