如何将字符串和组件作为 prop 传递?

2023-11-27

我可以通过这样的罚款:

<CardTitle title={this.props.post.title} subtitle={
    <Link to={this.props.post.author}>{this.props.post.author}</Link>
} />

但我需要传递一个组件和一些字符串文本,但这样做不起作用:

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

正确的语法是什么?


尝试将其完全作为 React 元素传递,而不是作为字符串传递:

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

然后应该能够渲染subtitle照原样。如果你使用 React >16,你可能想使用碎片为了这:

import { Fragment } from 'react';

// ...

subtitle={
  <Fragment>
    This is a link: <Link to={this.props.post.author}>{this.props.post.author}</Link>
  </Fragment>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将字符串和组件作为 prop 传递? 的相关文章

随机推荐

  • UITableView行动画持续时间和完成回调

    有没有办法指定 UITableView 行动画的持续时间 或者在动画完成时获取回调 我想做的是在动画完成后闪烁滚动指示器 在此之前进行闪光不会做任何事情 到目前为止 我的解决方法是延迟半秒 这似乎是默认的动画持续时间 即 self tabl
  • “已定义?”和“除非”未按预期工作

    我期待以下片段 var Not Empty unless defined var var gt nil 回来 Not Empty 但我得到了nil 任何关于为什么会发生这种情况的见解 这是 Ruby 中唯一我会称之为 WTF 的时刻之一 你
  • 使用 C# .Net 表达任何能被 60 整除的数字的正则表达式?

    我需要对以秒为单位的输入时间间隔进行验证 现在我不太擅长正则表达式 那么任何人都可以帮助制作一个正则表达式来测试一个数字是否可以被 60 整除吗 我想知道我是否可以使用测试来检查该数字是否可以被 10 整除 然后检查该数字是否可以被 6 整
  • 如何在Python中动态构建树

    一个初学者Python 编程问题 我想在Python中构建一个树结构 最好基于字典 我发现代码可以巧妙地完成此操作 Tree lambda collections defaultdict Tree root Tree 这可以很容易地填充 如
  • 使用delphi枚举本地网络上的Microsoft SQL数据库服务器

    如果我使用 C 我可以使用 net 框架Sql数据源枚举器发现并向用户显示网络上的 SQL Server 实例列表 我怎样才能在德尔福做到这一点 您可以使用网络服务器枚举函数 通过过滤SV TYPE SQLSERVERservertype
  • 如何将 WPF 窗口添加到类库项目[重复]

    这个问题在这里已经有答案了 我今天遇到了这个问题 我想将 WPF 窗口添加到现有的类库项目中 但它不存在于 添加新项 列表中 我找到了一个解决方案 只是想将其发布在这里 因为我在其他地方找不到它 解决方案是在记事本等文本编辑器中打开 csp
  • setOnKeyListener 没有响应

    我是 Android 新手 正在研究书中的待办事项列表示例 我有一个 Activity 它显示一个 EditText 和一个在其下方的 ListView 有一个 onKey 事件应该将 EditText 中的文本添加到 ListView 并
  • Pandas 相当于 Oracle Lead/Lag 函数

    首先 我对熊猫还不熟悉 但我已经爱上了它 我正在尝试实现 Oracle 中的 Lag 函数的等效项 假设您有这个 DataFrame Date Group Data 2014 05 14 09 10 00 A 1 2014 05 14 09
  • Django 按日期或小时记录到文件

    我知道 django 可以记录到一个文件 但我想知道如何在不同的时间打印到不同的文件 文件名如20150101 log 20150102 log 两个问题 我可以通过以下方式实现吗LOGGING gt filename配置 如果Q1不能 我
  • 如何在 php 中验证 google play 应用内购买?

    我希望使用 php 页面通过 google play 验证应用程序中应用程序内购买的收据 我该怎么做呢 我不是 PHP 专家 所以我不会发布任何代码 但总体过程是very直接了当 移植到 PHP 应该非常容易 您需要三件事来验证购买 您的应
  • 有没有类似Python导出的东西?

    我们一直使用 python 的导入机制来导入模块 变量和其他东西 但是 有什么可以作为导出的吗 喜欢 我们从模块导入东西 from abc import 那么我们可以像这样导出吗 to xyz export 或者 将a b c导出到prog
  • 如何在 Java 中表示整数区间?

    我们都知道数学中的区间 例如 4 如何在 Java 中表示这些数学区间 例如 4 和 3 之间的数字 4 3 2 3 等 检查 apache commons langIntRange 因此 如果您想检查一个数字是否在给定的间隔 范围 内 您
  • 我使用 Django 应用程序在 heroku 中收到错误 R14(超出内存配额)

    我在 Heroku 平台上为 Django 应用程序运行 3 个测功机 它工作正常 1 5 年 两周以来 我经常收到错误 R14 超出内存配额 错误 我应该怎么做才能避免这个错误 我如何监控问题 2015 01 27T10 34 01 85
  • 类变量字典未在 python 2.7 中使用 pickle.dump 保存

    我正在使用 pickle 通过转储根来保存对象图 当我加载根时 它具有所有实例变量和连接的对象节点 但是 我将所有节点保存在字典类型的类变量中 类变量在保存之前已满 但在我解封数据后它是空的 这是我正在使用的类 class Page cra
  • 如何在 swift Xcode 中以编程方式绑定/配对蓝牙 LE 设备?

    我目前正在尝试开发一个应用程序 允许用户通过单击按钮绑定到外围设备 并且将自动输入密码 是否可以使用 swift 以编程方式绑定和删除绑定 每当您尝试写入或读取 BLE 设备上的特征时 都会启动配对 但是 如果设备未设置为需要身份验证和 或
  • jar 文件文件夹中的资源列表?

    通常我从 jar 文件中读取资源 如下所示 getClassLoader getResource pTextPath pLang xml 我需要从 jar 文件中的已知文件夹中读取具有特定名称的所有资源 例如 从以下位置读取 xml 插件
  • 使用哪种 Android 数据存储技术?

    Android 文档有以下选项 但没有解释每个选项最适合什么情况 每种方法的优点和缺点是什么 例如在什么情况下 SQL 会比共享首选项更好 共享偏好设置 内部存储器 外置储存 SQLite数据库 网络连接 Android 中的不同存储选项
  • 为什么可以使用字符串文字来初始化 unsigned char 数组,但不能初始化 unsigned char 指针?

    我尝试过编译gcc Wall pedantic errors std c89下面的代码 int main unsigned char a foo unsigned char b foo unsigned char c unsigned ch
  • 大写输入字段的指令

    我想使用指令将所有输入数据转换为大写 为了实现这一目标 我创建了这个自定义指令 Directive selector appToUpperCase export class ToUpperCaseDirective constructor
  • 如何将字符串和组件作为 prop 传递?

    我可以通过这样的罚款