SPFx: Breaking webpart into modules

Home Page Forums Office 365 SharePoint SPFx: Breaking webpart into modules

Tagged: 

This topic contains 1 reply, has 1 voice, and was last updated by Profile photo of Mark Stokes Mark Stokes 2 weeks, 6 days ago.

  • Author
    Posts
  • #663
    Profile photo of Mark Stokes
    Mark Stokes
    Keymaster

    Hi all,

    I am trying to get into React in my SharePoint Framework Web Parts and looking how I might break up some complex UIs.

    It is practical to create multiple ReactElements for each piece of the UI (tab, command bar, filters, listview) so that they can be managed more easily? Rather than one massive RectElement for everything?

    For example:

    public render(): void {
      const elementTabs: React.ReactElement<ITabsProps > = React.createElement(
        Tabs,
        {
          description: this.properties.description
        }
      );
      ReactDom.render(elementTabs, this.domElement);
    
      const elementMenuBar: React.ReactElement<IMenuBarProps > = React.createElement(
        MenuBar,
        {
          description: this.properties.description
        }
      );
      ReactDom.render(elementMenuBar, this.domElement);
    
    }

    Is this a reasonable approach? It isn’t working for me as the second ReactDom.render() call overwrites the first.

    How would I manage the render of the multiple elements?

    -Mark

  • #672
    Profile photo of Mark Stokes
    Mark Stokes
    Keymaster

    For anyone interested, this is a good approach. I have developed it further and will create a User Group Session on this.

    If anyone wants to see it then let me know where you are and I’ll try to plan it into some meetings.

You must be logged in to reply to this topic.