Reactjs 函数组件中返回内部的条件呈现

如何在函数组件中有条件地呈现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内部，但我不想复制组件。

使用片段重构

 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>
  );

---

使用片段进行重构

 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>
  );

---

具体在什么条件下？在isLoading状态值上看起来是正确的。我想看看IsLoading是如何发生的。@HenokTesfaye你能添加你的钩子来看看这些发生了什么吗？@HenokTesfaye渲染是否正确，你只需要确保NewWindow在仍在加载时没有被装载？具体是在什么条件下？在IsLoading状态值上看起来是正确的。我想看看IsLoading是如何发生的。@HenokTesfaye你能添加你的钩子来看看这些发生了什么吗？@HenokTesfaye渲染是否正确，你只需要确保NewWindow在仍在加载时没有装载？如果你使用Fragment，你也可以使用内容语法对吗？@Trisma你是对的，但这取决于React版本如果你使用片段，你也可以使用内容语法，对吗？@Trisma你是对的，但这取决于版本