How to override part of component on React

Question

I have base code contains many components, and I have many projects depends on the base.

Some projects need to take base component with some customization, so how I can override the react component?

example:

Component 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;

Component A override

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

 ComponetADesc="Hello This is component A Overrid"

export default ComponentA

But this code not works, So how I can do that and what is the best way?

Probably already answered here: https://stackoverflow.com/questions/49706823/what-is-this-props-children-and-when-you-should-use-it and here https://stackoverflow.com/questions/38614897/reactjs-why-use-this-props-children — Dupocas, Oct 07 '19 at 16:06
I think you are looking for renderProps https://reactjs.org/docs/render-props.html. by specifying your layout in base and let the detailed components implement renderProps then you will get your desired results. — duc mai, Oct 07 '19 at 16:33

score 0 · Answer 1 · answered Oct 07 '19 at 16:10

If you need to just override Styles alone, use Styled-Components.

https://www.styled-components.com

const compAStyled = styled.(ComponentA)

If you need to override behavior, I'm not sure which one as if the base component wanted overriding behavior, it should be only via props and/or context.

How to override part of component on React

1 Answers1