根据条件渲染 JSX 元素

Posted

技术标签:

【中文标题】根据条件渲染 JSX 元素【英文标题】:Render JSX element based on condition 【发布时间】: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。有谁知道我该怎么做?感谢您提供任何帮助或建议,在此先感谢您。

【问题讨论】:

【参考方案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 (或其他任何东西)我们想要 将其保存在变量中。

【讨论】:

以上是关于根据条件渲染 JSX 元素的主要内容,如果未能解决你的问题,请参考以下文章

React Native:你能根据字符串的存在有条件地渲染 JSX 吗?

在 Helper 函数中渲染 JSX 元素数组

JSX条件渲染语法错误[重复]

列布局的React JSX条件渲染[重复]

在渲染函数中调用返回 JSX 元素的函数

如何渲染 JSX 元素数组(React 组件)