Javascript 如何使用要在React.component.render（）中呈现的部分jsx组件？

我是一个新来的反应。我想在主React.Component.render（）中包含一个部分JSX块，如下所示：

showWarning(){
    if (this.state.warning)
    return <h2>Warning ! Please hide this thing by clicking below</h2>
    else
    return null
  }
  render() {
    const shouldShow = this.showWarning() //Fetching a conditional part
    return (
      <>
      shouldShow  //The part fetched above should be added here
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
      </>
    );
  }

showWarning（）{
if（this.state.warning）
返回警告！请单击下面隐藏此内容
其他的
返回空
}
render（）{
const shouldShow=this.showWarning（）//获取条件部分
返回(
shouldShow//应在此处添加上面获取的零件
);
}

我知道解决这个问题的一种方法是这样的，但这会导致复制

：

if（this.state.warning）
返回(
警告！请单击下面隐藏此内容
);
否则返回(
);
}

---

有什么解决方案吗？

您可以这样更新：

return (
      <>
      {this.state.warning && <h2>Warning ! Please hide this thing by clicking below</h2> }
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
      </>
    );

返回(
{this.state.warning&&warning！请单击下面隐藏此内容}
);

您可以这样更新：

return (
      <>
      {this.state.warning && <h2>Warning ! Please hide this thing by clicking below</h2> }
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
      </>
    );

返回(
{this.state.warning&&warning！请单击下面隐藏此内容}
);

您可以使用三元运算符执行类似操作

return (
  <>
     {this.state.warning ? <h2>Warning ! Please hide this thing by clicking below</h2>: null}
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
  </>
)

返回(
{this.state.warning？warning！请单击下面的按钮隐藏此内容：null}
)

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
警告：错误
}
}
onToggle=（）=>{
this.setState（oldState=>({
警告：！oldState.warning
}));
}
getSomeConditionalJSX=（）=>{
返回this.state.warning？条件JSX-true
：条件JSX-false

}
getSomeOtherConditionalJSX=（）=>{
return！this.state.warning？其他条件JSX-true
：其他条件JSX-false

}
render（）{
返回(
{/*{this.state.warning？warning！！：null}*/}
{this.getSomeConditionalJSX（）}
{this.getSomeOtherConditionalJSX（）}
切换警告
)
}
}
render（，document.getElementById（“react”）
您可以使用三元运算符执行类似操作

return (
  <>
     {this.state.warning ? <h2>Warning ! Please hide this thing by clicking below</h2>: null}
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
  </>
)

返回(
{this.state.warning？warning！请单击下面的按钮隐藏此内容：null}
)


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
警告：错误
}
}
onToggle=（）=>{
this.setState（oldState=>({
警告：！oldState.warning
}));
}
getSomeConditionalJSX=（）=>{
返回this.state.warning？条件JSX-true
：条件JSX-false

}
getSomeOtherConditionalJSX=（）=>{
return！this.state.warning？其他条件JSX-true
：其他条件JSX-false

}
render（）{
返回(
{/*{this.state.warning？warning！！：null}*/}
{this.getSomeConditionalJSX（）}
{this.getSomeOtherConditionalJSX（）}
切换警告
)
}
}
render（，document.getElementById（“react”）

这叫做“内联JSX”吗？它调用了条件呈现：你可以在这里阅读更多内容：是的，找到了。谢谢，但是我们真的可以使用不同的位来形成最终的jsx吗？这叫做“内联jsx”吗？它调用<代码>条件渲染：您可以在这里阅读更多内容：是的，得到了。谢谢，但是我们真的可以使用不同的位来形成最终的jsx吗？谢谢，但是有没有一种方法可以像我们对字符串所做的那样，专门将位添加到jsx中。意思是，先是一些条件呈现部分，然后是静态部分，然后是条件呈现部分？这就是你想要的吗？是的，就像一些基于从另一个实用程序函数返回的jsx的渲染，然后将其添加到最终的render（）调用中。是的，我们也可以这样做。谢谢你的回答。这就是我一直在寻找的。谢谢，但是有没有一种方法可以像我们对字符串所做的那样专门向jsx中添加位。意思是，先是一些条件呈现部分，然后是静态部分，然后是条件呈现部分？这就是你想要的吗？是的，就像一些基于从另一个实用程序函数返回的jsx的渲染，然后将其添加到最终的render（）调用中。是的，我们也可以这样做。谢谢你的回答。这就是我要找的。