使用Lodash进行TypeScript字符串插值

Question

在我的应用程序中，我有一个H自定义组件，它将标题和子标题作为属性输入。

对于我的标题属性，我想使用lodash表达式与字符串连接。请参见下面的代码。

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

我已尝试这里提供的建议https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings，但可能因为我使用了lodash库，所以它无法正常工作。

- user19251203

Answer 1

您的prop语法有误：

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

在React中，任何包含代码的属性值都必须用{}括起来。只有像prop="a string"这样的常量字符串可以在不加括号{}的情况下传递。所有其他值都需要它。

*好吧，还有两个特殊情况。 children设置如下。这里的children是类似于<>content</>的东西。

<MyComponent>content</MyComponent>

还有布尔值的简写属性。这里isCool是true。

<MyComponent isCool />

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

<MyComponent isCool={false} />

- Alex Wayne