How can I render children inside a component that does not render children?-CodePudding

I have an imported React component that I have no control over and I want to inject? content into it. How can I do that?

Pseudocode:

A component might look like this:

export const Component = ( props ) => {
    const { children } = props
    
    return (
        <div className="some-component">
          <div className="header">
            <h2>Component header</h2>
            // ideally, there would be something like {props.headerContent} here
            // How can I add additional content here ?
          </div>
          <div className="body">
            {children}
          </div>
        </div>

    );
};

Usage

import { SomeComponent } from 'some-components-on-npm';


export const MyComponent = () => {
        
    return (
        <SomeComponent
         headerContent="Obviously won't work"
        >
          <div>Body content</div>
        </SomeComponent>

    );
};

EDIT: If it's any easier, I'd be content with injecting content at the root level of the component. It doesn't need to be nested as the example suggests

CodePudding user response：

As I understand, what you want is a Higher Order Component (HOC). A HOC is a function that takes a component and returns a new component. You can create/manipulate/fetch data inside a HOC and the data can be sent down to the received component.

const Wrapper = Component => ({ ...props }) => (
  const data = axios.get()
  // manipulate data
  // add redux store
  // ...
  <Component {...props} data={data}/>
);

And you can use it like this:

const WrappedComponent = Wrapper(Component);

You can read more about HOCs in the official react documentation

CodePudding user response：

You cant give a component props as the component itself wont do anything with them.

The simplest solution that might work but probably wont is to wrap the component in another component and then put both your injected child and the component itself in as siblings although im guessing this wont work

<div>
<YourHeader />
<SomeComponent />
</div>

next option is if the component itself is open source you can make a pull request and/or a fork.

Last option is to rewrite the component locally.

Either way though if you want the component to use the props you send it you will need to edit the component itself and react component can't be extended in that way.

CodePudding user response：

Whenever you need access to a component that is imported from a third-party library, just render the component in the browser and then inspect the elements in that component with dev tools. Then use CSS selectors to access those elements, and change their content or style as you wish. Let's say you put the Component in a div with the id of container1 and in the component, you will find 2 divs. Inside the inner div is where you would like to put your content. this would be the code:

const myContent = "This is the content to be put in the component"
document.getElementById("container1").querySelector("div").querySelector("div").innerHTML = myContent