从props.children中提取组件？

Question

I was working on a Panel component in ReactJS, and so, idea is to make the basic components available along with the collapse/close functionality. However, I am unable to find any way to extract a component from this.props.children .

So here is my component:

import React, { Component } from 'react';
import Header from './PanelHeader';
import Body from './PanelBody';


class Panel extends React.Component {
   constructor(props) {
      super(props);
      this.state = { open: true };
   }


   render() {
      return (
        <StyledPanel>
          {this.props.children}   <-- Is there a way to extract the Header component here
        </StyledPanel>
      );
   }
}

Object.assign(Panel, 
{
  Header,
  Body
});

export default Panel;

So, now the user of this component can do something like:

<Panel>
   <Panel.Header>Header text for this panel</Panel.Header>
   <Panel.Body>Body of this panel</Panel.Body>
</Panel>

Header component contains a toolbar control for collapse and close functionalities. Now I do understand that the user of this component can specify these event handlers, and implement these features. But I want this out of the box. So, Panel by default, should be able to collapse everything except the header. So is it possible to extract Header component inside the Panel from this.props.children ? If yes, then how?

Also, if I did make this work by:

1. Iterating this.props.children until child.type === Header
2. Using React.cloneElement to assign new props
3. And passing in the new event handlers for these new features.

Am I doing something wrong here? Or is there some elegant way to achieve this?

Thank you.

Answer 1

You could implement it as a higher-order component which would take header and body as parameters. You could pass any header or body, the only restriction would be that header requires an onOpenChanged callback prop .

Here is a working sandbox .

Link to HOC

const Header = (props) =>{
  const { onOpenChanged } = props;
  return <div onClick={onOpenChanged}>Header text for this panel</div>;
}

const Body = () => <div>Body of this panel</div>;

const stylishPanel = (WrappedHeader, WrappedBody) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isOpen: true
      };
    }
    handleToggleOpen = () => {
      this.setState(({ isOpen }) => ({
        isOpen: !isOpen
      }));
    };
    render() {
      const { isOpen } = this.state;
      // your styled-panel instead of div
      return (
        <div className="super-panel">
          <WrappedHeader onOpenChanged={this.handleToggleOpen} />
          {isOpen && <WrappedBody />}
        </div>
      );
    }
  };
};
const App = () => {
  const SuperPanel = stylishPanel(Header, Body);
  return (
    <div style={styles}>
       <SuperPanel />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Answer 2

In case you want to extract a component from this.props.children ,

try to use Function as a Child / Render props pattern.

the pattern is like this:

class MyComponent extends Component {
  state = {
    bgcolor: 'red'
  }

  render(){
    <div>
       { this.props.children(this.state.bgcolor)}
    </div>
  }
}

class App exnted Component {
  render(){
    <MyComponent> 
      { bgColor => <Header bgcolor={bgColor} /> }
    </MyComponent>
  }
}

See MyComponent is just a wrapper that passes a value to its function. The function as written inside App component is just a stateless function/component, an arrow function that returns some JSX .

The HOC pattern as mantioned above is also a way.

This is a known topic about those 2 patterns. This article might shad some light in case your are not yet sure: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce