根据条件渲染 JSX 元素 [英] Render JSX element based on condition

问题描述

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

So I have a simple component within a web app I have been working on and I was wondering if there is a way I could render an element within this component based on the value of 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.有谁知道我该怎么做?感谢您提供任何帮助或建议，在此先感谢您.

But I cannot write javascript withing the render function itself. Does anyone know how I could do this? Any help or advice is appreciated, thank you in advance.

推荐答案

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

You can use conditionally render using if and return the appropriate 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-渲染.html

这篇关于根据条件渲染 JSX 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！