SPFx | 客戶端 Web 部件 | 反應 | 如何通過部分組件傳遞 sharepoint 上下文

Question

react.js 很新，我正在嘗試在 SPFx 中開發一個具有多個頁面的 webpart，並且在內部頁面中我想要一些“部分組件”。 目標是每個組件都可以自主訪問 sharepoint 上下文以獲取數據。

我沒有深入的知識知道這是最好的方法......請隨意給我一些想法......我真的很掙扎。

• 反應圖
  • 家
    • 伙伴

如何通過所有這些組件來保持 SharePoint 上下文？

我什至試圖通過反應重定向發送上下文，但我無法訪問“this.props.location.state”，因為位置未定義。

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

代碼詳情如下。

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');
  }
}

家.tsx：

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

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

合作伙伴.tsx

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

干杯

Answer 1

我的方法如下：

帶路由器的主要部件

<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>

子組件

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 ...
...