SPFx | Client WebPart | React | How to pass sharepoint context through partial components

Question

Pretty new in react.js, I'm trying to develop a webpart in SPFx with multiple pages, and inside pages I would like to have some "partial components". the objective is that each component get's to be autonomous to access sharepoint context to get data.

I don't have the deep knowledge to know that this is the best approach... feel free to get me some ideas... I'm really struggling.

• ReactChart
  • home
    • Partners

How can I presist the SharePoint Context through all this components?

I'm even trying to send context through the react redirect but I can't access the "this.props.location.state" because location in undefined.

<Redirect to={{ pathname: "home", state: { id: "123", context: this.props.context } }} />

Code details bellow.

ReactChart.tsx:

export default class ReactChart extends React.Component<IReactChartProps> {

  constructor(props: IReactChartProps) {
    super(props);
  }

  public render(): React.ReactElement<IReactChartProps> {
    let sharepointContext = this.props.context;
    return (
      <Router>
        <div className={styles.container}>
          <div>
            <h2>Organizational Chart</h2>
          </div>
          {/* The different screens will be re-rendered here */}
          <Switch>
            <Route exact path="/home" component={home} />
            <Route exact path="/detail" component={detail} />
            <Route exact path="/test_page" component={test_page} />
          </Switch>
          <Redirect to={{ pathname: "home", state: { id: "123", context: this.props.context } }} />
          <div>Footer</div>
        </div>
      </Router>
    );
  }
}

ReactChartWebPart.ts

export default class ReactChartWebPart extends BaseClientSideWebPart<IReactChartProps> {

  public render(): void {

    const element: React.ReactElement<IReactChartProps> = React.createElement(
      ReactChart,
      {
        description: this.properties.description,
        context: this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

home.tsx:

export class home extends React.Component<IReactChartProps, {}> {
    public render(): React.ReactElement<IReactChartProps> {

        return (
            <div>
                <Partners />
                <div>some text</div>
            </div>
        );
    }
}

Partners.tsx

export class Partners extends React.Component<{}, {}> {
    public render(): React.ReactElement<{}> {
        return (
            <div>
                some partners text
            </div>
        );
    }
}

cheers

Answer 1

My approach below:

Main component with router

<Switch>
  <Route 
    exact 
    path="/" 
    render={(props) => 
      <ChildComponent1
        {...props} 
        debug={this.props.debug}
        context={this.props.context}
        inDesignMode={this.props.inDesignMode}
      />}
  />
  <Route 
    path="/newcontract/:parentFolder?/:parentId?" 
    render={(props) => 
      <ChildComponent2
        {...props} 
        debug={this.props.debug}
        context={this.props.context}
        inDesignMode={this.props.inDesignMode}
      />}
  />
  <Route 
    path="/editcontract/:folder/:id" 
    render={(props) => 
      <ChildComponent3
        {...props} 
        debug={this.props.debug}
        context={this.props.context}
        inDesignMode={this.props.inDesignMode}
      />}
  />
  <Route 
    path="/viewcontract/:folder/:id" 
    render={(props) => 
      <ChildComponent4
        {...props}
        debug={this.props.debug}
        context={this.props.context}
        inDesignMode={this.props.inDesignMode}
      />
    }
  />
  <Route>
      {null} 
  </Route>
</Switch>

ChildComponent

import { RouteComponentProps  } from 'react-router';
export default class ChildComponent1 extends React.Component<IChildComponent1Props & RouteComponentProps, IChildComponent1State> {
 private _folder: string;
 private _id: string;
constructor(props: IChildComponent1Props & RouteComponentProps ) {
    super(props);
    // set initial state
    this.state = {
      ...
    };
    this._folder = props.match.params['folder'];
    this._id = props.match.params['id'];
  }
public componentDidUpdate(prevProps: IChildComponent1Props & RouteComponentProps, prevState: IChildComponent1State): void {
... 
if ((prevProps.match.params['folder'] !== this.props.match.params['folder']) || (prevProps.match.params['id'] !== this.props.match.params['id'])) {
      this._folder = this.props.match.params['folder'];
      this._id = this.props.match.params['id'];
}
// context is in this.props.context ...
...