如何在 React.Component.render() 中使用要渲染的部分 jsx 组件？答案

【问题标题】：How to use a partial jsx component to be rendered in React.Component.render()?如何在 React.Component.render() 中使用要渲染的部分 jsx 组件？
【发布时间】：2021-04-24 10:28:33
【问题描述】：

我是新人反应。我想在主 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}
      />
      </>
    );
  }

我知道解决此问题的一种方法是这样，但这会导致 <input> 的复制：

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

有什么解决办法吗？

【问题讨论】：

标签： javascript reactjs react-component

【解决方案1】：

你可以使用三元运算符来做这样的事情

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}
      />
  </>
)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      warning: false
    }
  }
  
  onToggle = () => {
    this.setState(oldState => ({
      warning: !oldState.warning
    }));
  }
  
  getSomeConditionalJSX = () => {
    return this.state.warning ? <p>Conditional JSX - true</p>: <p>Conditional JSX - false</p>
  }
  
  getSomeOtherConditionalJSX = () => {
    return !this.state.warning ? <p>Other Conditional JSX - true</p>: <p>Other Conditional JSX - false</p>
  }
  
  render() {
    return (
      <React.Fragment>
       {/* {this.state.warning ? <h2> Warning!! </h2>: null} */}
        {this.getSomeConditionalJSX()}
        <input />
        {this.getSomeOtherConditionalJSX()}
        <button onClick={this.onToggle}>Toggle Warning</button>
      </React.Fragment>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

【讨论】：

谢谢，但有没有办法像我们对字符串所做的那样，专门将位添加到 jsx 中。
意思是先条件渲染部分再静态部分再条件渲染部分？这就是你想要的吗？
是的，比如一些基于jsx的渲染，从另一个实用函数返回，然后添加到最终的render()调用中。
是的，我们也可以这样做。
感谢您的回答。这就是我要找的。span>

【解决方案2】：

你可以这样更新：

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

【讨论】：

这叫“内联 JSX”吗？
它调用conditional-rendering：您可以在这里阅读更多内容：reactjs.org/docs/…
是的，明白了。谢谢，但我们真的可以使用不同的位来形成最终的 jsx 吗？