追加（连接）HTML 元素以反应 props 值

Question

我有一个如下所示的 JSX。下面的代码正在运行（多个三元条件）。

<div className="myClassName">
                     {this.props.addr? this.props.addr.phoneno : '' }
                     {this.props.addr? (<span
                             className='location'>
                             {this.props.addr.location}
                      </span>) : ''}
                  </div>

当我尝试使用以下语法和一个三元运算符时，出现错误。

<div className="myClassName">
                     {this.props.addr? this.props.addr.phoneno (<span
                             className='location'>
                             {this.props.addr.location}
                      </span>) : '' }

                  </div>

我只想附加一个具有 phoneno 值的 Span 元素。如何在此示例中进行正确的串联？

Answer 1

React 不允许在一个块中返回多个子元素。所以要解决这个问题，你可以使用 React.Fragment。关于 Fragments here 有更多的解释。以下是更正后的语法。

<div className="myClassName">
     {this.props.addr ? (
     <React.Fragment>
        {this.props.addr.phoneno}
        <span className='location'>
           {this.props.addr.location}
        </span>
      </React.Fragment>) : '' }
</div>

追加（连接）HTML 元素以反应 props 值

Append (Concatenate) HTML Element To React props Value

concatenation

append

jsx

reactjs

react-props