React扩展组件渲染函数调用

Question

let say,i have a component, which is in render function of extended component.

as only one render function will call , if i remove the function from "Panel" it will work on "ExtendedComponent", is their any other way. so only by function i can render "SomeComponent" from "ExtendedComponent"

 class ExtendedComponent extends React.Component { constructor(props) { super(props); this. state = { showComponent: false, }; } render() { console.log(this.state); const {showComponent} = this.state; return showComponent ? ( <SomeComponent content="Message sent" />) : null; } toggleComponent = () => { console.log("came here"); this.setState(({showComponent}) => ({showComponent: !showComponent})); }; } 

 class Panel extends ExtendedComponent { componentDidMount() { this.toggleToast(); } render() { return ( <div> <h1>Hey!!!!!</h1> </div> ); } } 

Answer 1

There are two ways to have the super component rendering instead of the subcomponent:

• Removing the render method from the subcomponent
• Explicitly returning super.render();

The second one is suitable in your case since it would work dynamically.

class Panel extends ExtendedComponent {
  constructor(props) {
    super(props);
    this.state = { foo: true };
  }

  componentDidMount() {
    this.toggleToast();
  }

  render() {
    if (this.state.foo) {
      return super.render();
    }
    return (
      <div>
        <h1>Hey!!!!!</h1>
      </div>
    );
  }
}