所以我正在尝试实现@pnp/sp
的PlaceHolder
组件:
public render(): React.ReactElement<Props> {
let buttons;
if (this.props.context.pageContext.web.permissions.hasPermission(SPPermission.addListItems)) {
buttons = <div>
<PrimaryButton
onClick={this._fetchJobs.bind(this)} text="Refresh Jobs"
/>
<PrimaryButton
onClick={this._showCreateJobPanel.bind(this)}
text="Create New Job"
/>
</div>;
}
return (
<div className= { styles.container }>
{ this.state.locations ? (
<Placeholder
iconName='Edit'
iconText="Configure the Delivery Board"
description="Please configure your Delivery Board"
buttonLabel="Configure"
// onConfigure={this.props.fPropertyPaneOpen} />
/>
) : (
<WebPartTitle
displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty}
/>
{buttons} <-- line 216
)}
</div>
)
}
尝试添加 {buttons}
会导致错误:
[10:28:58] Error - [tsc] src/Components/file.tsx(216,7): error TS1005: ')' expected.
我很确定它与嵌套括号 {} 有关,但我不太了解原因或如何解决它。
最佳答案
在三元运算符的每种情况下只能放置一个表达式。假设您使用的是 React 16 或更高版本,您可以通过将其包装在片段中来解决此问题:
{ this.state.locations ? (
<Placeholder
iconName='Edit'
iconText="Configure the Delivery Board"
description="Please configure your Delivery Board"
buttonLabel="Configure"
/>
) : (
<React.Fragment>
<WebPartTitle
displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty}
/>
{buttons}
</React.Fragment>
)}
在 React 16 之前,您可以使用 div,也可以使用数组。这是一个数组:
{ this.state.locations ? (
<Placeholder
iconName='Edit'
iconText="Configure the Delivery Board"
description="Please configure your Delivery Board"
buttonLabel="Configure"
/>
) : (
[
<WebPartTitle
displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.updateProperty}
/>,
buttons
]
)}
关于javascript - 根据条件中的条件渲染事物,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52335097/