根据 JSX 中的条件更改包装其 children 的元素

Question

我不确定如何给这个问题起标题，但我基本上想知道是否有更简洁的方法来做到这一点：

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>
}

根据 props.vertical 是否为 true，我将 {props.children} 和 {help} 包装在跨度或 div 中。有没有一种干净的方法可以做到这一点而无需重复 {props.children}{help} 两次？有没有办法把我想要的元素类型放在一个变量中，然后在jsx中用它来包装这些？

Answer 1

可以构建 React 元素 either from a Component, or a string representing an HTML tag。

这意味着，像下面这样的方法非常有效：

const App = (props) => {
  const wrapper = props.horizontal ? 'div' : 'span'
  return <wrapper className="col-sm-10">Content</wrapper>
}

ReactDOM.render(
  <App horizontal={true} />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'></div>

根据 JSX 中的条件更改包装其 children 的元素

Change the element wrapping its children based on a condition in JSX

javascript

jsx

reactjs