javascript - 根据条件中的条件渲染事物

Question

所以我正在尝试实现@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.

我很确定它与嵌套括号 {} 有关，但我不太了解原因或如何解决它。

Answer 1

在三元运算符的每种情况下只能放置一个表达式。假设您使用的是 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
  ]
)}