如何在React中同时传递字符串与组件作为Prop？

你遇到的问题很典型——模板字符串是用来处理纯字符串的，当你把React组件（比如<Link>）塞进去时，它会调用组件的toString()方法，最终输出的是[object Object]，自然没法正确渲染链接。

下面是几种正确的写法，任选其一即可：

方法1：使用React.Fragment简写（推荐） #

React允许你用<>和</>包裹多个元素（文本+组件），这是Fragment的简写形式，不会额外生成DOM节点：

<CardTitle 
  title={this.props.post.title} 
  subtitle={<>This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link></>} 
/>

方法2：使用完整的React.Fragment（兼容旧版React） #

如果你的React版本不支持Fragment简写，就用完整的标签：

import React from 'react';

// ...

<CardTitle 
  title={this.props.post.title} 
  subtitle={<React.Fragment>This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link></React.Fragment>} 
/>

方法3：使用数组（需注意key） #

也可以把文本和组件放在数组里传递，但要给每个元素添加唯一的key（React要求列表元素必须有key）：

<CardTitle 
  title={this.props.post.title} 
  subtitle={[
    'This is a link: ',
    <Link key="author-link" to={this.props.post.author}>{this.props.post.author}</Link>
  ]} 
/>

核心思路就是：在JSX的{}里直接写JSX结构（可以混合文本和组件），而不是用模板字符串拼接——毕竟JSX本身就是用来描述UI结构的语法，直接用它来组合文本和组件才是正确的姿势。

内容的提问来源于stack exchange，提问作者user967451