SPFx|Client WebPart|React|如何通过部分组件传递sharepoint上下文

Question

在react.js中很新，我正在尝试在SPFx中开发一个具有多个页面的Web部件，在页面内部我希望有一些"部分成分"；。目标是每个组件get都能够自主访问sharepoint上下文以获取数据。

我不知道这是最好的方法。。。请给我一些想法。。。我真的很挣扎。

• 反应图
  • 主页
    • 合作伙伴

如何通过所有这些组件预先列出SharePoint上下文？

我甚至试图通过react重定向发送上下文，但我无法访问"；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>
);
}
}

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