Reactjs 反应内联条件，在1个条件中创建多个元素

如果这很简单，我很抱歉

我正在尝试使用React在Cordova中创建notes应用程序。一切都很好，但在组件内联后插入中断时遇到问题。我知道我可以将其分为两个div，并使用css对其进行样式化，但我很好奇如何使用1个div和break实现这一点

那么，我在寻找什么呢

<div id=id key=key>Subject<br/><br/>Body</div>

Subject

Body

React似乎不喜欢添加这样的组件。如果我使用该条件两次，我可以使其工作：

render: function(){
    var data = this.props.data;
    return data.map(function(noteData){ 
                return <div id='note' key={noteData.id}>{noteData.subj.length > 0 ? noteData.subj: ''}{noteData.subj.length > 0 ? <br/>: ''} {noteData.body}</div>;
    });
}

render:function（）{
var数据=this.props.data；
返回data.map（函数（noteData）{
返回{noteData.subg.length>0？noteData.subg:'''}{noteData.subg.length>0？
：'''}{noteData.body}；
});
}

它不允许出现以下情况：

return <div id='note' key={noteData.id}>{noteData.subj.length > 0 ? noteData.subj<br/><br/>: ''}{noteData.body}</div>;

返回{noteData.subg.length>0？noteData.subg

：''}{noteData.body}；

它似乎不允许文本（除非我做错了什么）

“\n”或“
”，带或不带括号（{“
”）例如。

---

我确信这与React如何创建元素有关，但是。。。这里有单功能解决方案吗？正确的方法是什么？

将三元表达式的右侧包装到元素中

noteData.subj.length > 0 ? <div>{noteData.subj}<br/><br/></div>: ''

noteData.subc.length>0？{noteData.subc}

：“”

在条件中不能返回多个元素，并且尝试返回一个包含两个br的文本

return <div id='note' key={noteData.id}>{noteData.subj.length > 0 ? noteData.subj<br/><br/>: ''}{noteData.body}</div>;

希望它能帮助您。

另一种方法：

renderSubjectWithBreaks(noteData) {
  return [
    noteData.subj,
    <br/>,
    <br/>
  ]
}

renderSubjectWithBreaks（noteData）{
返回[
noteData.subc，

，


]
}

然后：

return <div id='note' key={noteData.id}>
         {Boolean(noteData.subj.length) && this.renderSubjectWithBreaks(noteData)}
         {noteData.body}
       </div>;

返回
{Boolean（noteData.subc.length）&&this.renderSubjectWithBreaks（noteData）}
{noteData.body}
;

太好了，我知道一定有办法（而且很简单）——非常感谢。我会在2分钟内勾选。没问题@Aaron

renderSubjectWithBreaks(noteData) {
  return [
    noteData.subj,
    <br/>,
    <br/>
  ]
}

return <div id='note' key={noteData.id}>
         {Boolean(noteData.subj.length) && this.renderSubjectWithBreaks(noteData)}
         {noteData.body}
       </div>;