Reactjs 如何在呈现React组件时添加逻辑if语句？

如果我有这样的代码

var Lounge = React.createClass({displayName: "Lounge",
  render: function() {
    return (
            React.createElement("a", {href:"/lounge/detail/" + this.props.id +  "/"},
            React.createElement("div", {className: "lounge"},
            React.createElement("h2", {className: "loungeAuthor"},
              this.props.author.name
            ),
            React.createElement("p", {className: "loungeArticle"},
              this.props.article
            ),
            React.createElement("img", {className: "loungeImage", src: this.props.image})
          )
        )
    );
  }
});

---

我需要做一个逻辑if检查，如果图像数据存在，只渲染“img”组件。有人知道使用React的最佳方法吗

好吧，很多人可能都很清楚这一点，出于某种原因，我没有看到它，然后我又在快速浏览文档，我没有使用JSX（真的不喜欢它）

因此，在呈现react组件时添加逻辑if检查的JavaScript方法如下所示。（请记住，undefined可以很好地工作，因此假设if语句没有命中，它仍然可以很好地渲染）

---

如果要以内联方式执行，可以执行以下操作：

{this.props.image && <img className="loungeImage" src={this.props.image}/>}

this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})

---

保持此逻辑内联以及使用JSX可能有助于提高可读性

从“React”导入React；
从“道具类型”导入道具类型；
从“/Lounge.css”导入s；//参见CSS模块
//无状态功能组件（因为没有状态）
功能休息室（{id，文章，作者，imageUrl}）{
返回(
);
}
//道具验证
Lounge.propTypes={
id:PropTypes.number.isRequired，
文章：PropTypes.string.isRequired，
imageUrl:PropTypes.string，
作者：PropTypes.shape({
名称：PropTypes.string.isRequired
}).需要
};
导出默认休息室；

您可以使用：

var节点=require（'react-if-comp'）；
var Lounge=React.createClass({
displayName:'休息室'，
render:function（）{
返回(
);
}
});

使用JSX+IIFE（立即调用的函数）可以非常方便和明确：

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

{（（）=>{
if（isEmpty（routine.querys））{
返回此.setState（{configured:true}）}/>
}else if（this.state.configured）{
返回此.setState（{configured:false}）}/>
}否则{
返回此.setState（{configured:true}）}/>
}
})()}

出于某种原因，我不喜欢JSX。这似乎是不必要的一步。我想这也是我对CoffeeScript或TypeScript不感兴趣的原因。至少可以在render（）方法的代码中使用条件语句，以可视化方式构造所有HTML元素。

{!!this.props.image && <img className="loungeImage" src={this.props.image}/>}

!!this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})

var Node = require('react-if-comp');

var Lounge = React.createClass({
    displayName: 'Lounge',
    render: function() {
        return (
            <a href={'/lounge/detail/' + this.props.id + '/'}>
                <div className='lounge'>
                    <h2 className='loungeAuthor'>{author.name}</h2>
                    <p className='loungeArticle'>{article}</p>
                    <Node if={this.props.image}
                        then={<img className='loungeImage'
                        src={this.props.image} />} />
                </div>
            </a>
        );
    }
});

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}