Javascript 根据JSX中的条件更改封装其子元素的元素

我不知道该如何命名这个问题，但我基本上想知道是否有更干净的方法：

var inputElement;
if(props.horizontal){
     inputElement = <div className="col-sm-10">
        {props.children}
        {help}
    </div>
} else {
    inputElement = <span className="col-sm-10">
        {props.children}
        {help}
    </span>
}

var输入元素；
if（水平支柱）{
inputElement=
{props.children}
{help}
}否则{
inputElement=
{props.children}
{help}
}

---

基于

props.vertical

是否为

true

，我将

{props.children}

和

{help}

包装在一个span或div中。有没有干净的方法可以做到这一点而不重复

{props.children}{help}

两次？有没有办法将我想要的元素类型放入变量中，然后在jsx中使用它来包装这些元素？

可以构造React元素

这意味着，类似以下的方法非常有效：

const-App=（道具）=>{
const wrapper=props.horizontal？'div'：'span'
返回内容
}
ReactDOM.render(
,
document.getElementById（'app'）
)