根据条件渲染 JSX 元素答案

【问题标题】：Render JSX element based on condition根据条件渲染 JSX 元素
【发布时间】：2017-03-08 13:44:57
【问题描述】：

所以我在一个我一直在开发的网络应用程序中有一个简单的组件，我想知道是否有一种方法可以根据 this.props.item 的值在这个组件中呈现一个元素。

这是我的 JSX：

var React = require("react"); var actions = require("../actions/SchoolActions");

module.exports = React.createClass({
    deleteSchool: function(e){
        e.preventDefault();
        actions.deleteSchool(this.props.info);
    },
    render:function(){
        return(
            <div className="panel panel-default">
                <div className="panel-heading">
                    {this.props.info.name}
                    <span className="pull-right text-uppercase delete-button" onClick={this.deleteSchool}>&times;</span>
                </div>
                <div className="panel-body">{this.props.info.tagline}</div>
            </div>
        )
    } })

我希望能够做这样的事情：

   render:function(){
        return(
  code blah blah...

if (this.props.info = "nothing"){
    <div className="panel-body">{this.props.info.tagline}</div>
     }

  ...code blah blah

但是我不能用渲染函数本身编写 javascript。有谁知道我该怎么做？感谢您提供任何帮助或建议，在此先感谢您。

【问题讨论】：

标签： javascript reactjs components jsx

【解决方案1】：

您可以使用if 进行条件渲染并返回相应的jsx

render(){
    if(something){
       return(<MyJsx1/>)
    }else{
       return(<MyJsx2/>)
    }
}

您可以将组件更改为：

       render:function(){
            return(
                <div className="panel panel-default">
                    <div className="panel-heading">
                        {this.props.info.name}
                        <span className="pull-right text-uppercase delete-button" onClick={this.deleteSchool}>&times;</span>
                    </div>
                   {this.props.info = "nothing"?
                   (<div className="panel-body">{this.props.info.tagline}</div>)
                   :null}

                </div>
            )
        } })

https://facebook.github.io/react/docs/conditional-rendering.html

【讨论】：

啊，太酷了，我只是想知道如何在我的组件中实现它。
@danjonescidtrix 完全发布您的组件
完整的组件显示在我的问题顶部
这很棒，非常感谢！

【解决方案2】：

单行示例

{(this.state.hello) ? <div>Hello</div> : <div>Goodbye</div>}

或

{(this.state.hello) ? <div>Hello</div> : false}

【讨论】：

【解决方案3】：

我经常为此创建一个显式函数，以避免主渲染中的混乱：

var ChildComponent = React.createClass({
  render: function () {
      return (<p>I am the child component</p>)
  }
});

var RootComponent = React.createClass({

  renderChild: function () {
    if (this.props.showChild === 'true') {
      return (<ChildComponent />);  
    }

    return null;
  },

  render: function () {
   return(
      <div>
        { this.renderChild() }
        <p>Hello World!</p>
      </div>
     )
  }
});

【讨论】：

【解决方案4】：

http://reactkungfu.com/2016/11/dynamic-jsx-tags/

对于许多使用 JSX 的 React 开发人员来说，不清楚如何制作一个动态 JSX 标签。这意味着不是硬编码是否是 input 或 textarea 或 div 或 span （或其他任何东西）我们想要将其保存在变量中。

【讨论】：