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