功能组件内部返回中的条件渲染

Question

如何在函数组件的return内部有条件地渲染元素。 我不想重复两次NewWindow组件。

  return (
    <NewWindow
      onUnload={props.closeGradeReport}
      features={{ height: 500, width: 2500 }}
      title='Grade Report Chart'
    >
      <div className='grade-report-chart'>
        <div className='grade-report-chart-header'>
          // I want to render Loading.... or p element inside return
          { 
            isLoading ? <div> Loading...</div> : 
          <p> {selectedUser.name} ({selectedCohort})</p>
          }
        </div>
      </div>
    </NewWindow>

我知道我可以在NewWindow中返回Loading ...，但是我不想重复该组件。

Answer 1

使用片段重构

 return (
    <Fragment>
      {isLoading ? (
        <div> Loading...</div>
      ) : (
        <NewWindow
          onUnload={props.closeGradeReport}
          features={{ height: 500, width: 2500 }}
          title="Grade Report Chart"
        >
          <div className="grade-report-chart">
            <div className="grade-report-chart-header">
              <p>
                {selectedUser.name} ({selectedCohort})
              </p>
            </div>
          </div>
        </NewWindow>
      )}
    </Fragment>
  );