根据条件渲染 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>×</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>×</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 元素的主要内容,如果未能解决你的问题,请参考以下文章