使用 lodash 的打字稿字符串插值

Question

在我的应用程序中，我有一个 H 自定义组件，它接受一个标题和一个子标题作为道具。

对于我的标题道具，我想将 lodash 表达式与字符串连接起来。 请参阅下面我的代码。

        <H
          header= `${_.startCase(type)} SomeString`
          subheader= "Lorem ipsum do eiusmod"
        />

我已经尝试过这里的建议https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals ，但可能是因为我使用的是 lodash 它不起作用。

Answer 1

您的道具的语法不正确：

header={`${_.startCase(type)} SomeString`}

在 React 中，任何包含代码的 prop 值都必须包含在{}中。

只有像prop="a string"这样的常量字符串可以在没有一对封闭{}的情况下传递。 所有其他值都需要它*。

---

* 好吧，有两种特殊情况。

children设置如下。 这里的children类似于<>content</> 。

<MyComponent>content</MyComponent>

和布尔速记道具。 这里isCool是true 。

<MyComponent isCool />

虽然，如果要将其设置为false ，则需要再次使用花括号：

<MyComponent isCool={false} />