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

Question

In my application, I have a H custom component that takes in a header and a subheader as props.

For my header prop, I want to concatenate the lodash expression with a string. See below my code.

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

I have tried the suggestions here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals , but maybe because I am using lodash it is not working.

Answer 1

The syntax for your prop is incorrect:

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

In React, any prop value that contains code must be enclosed in {} .

Only constant strings like prop="a string" may be passed without a pair of enclosing {} . All other values require it*.

---

* Well, there are two special cases.

children which is set like the following. Here children is something like <>content</> .

<MyComponent>content</MyComponent>

And boolean shorthand props. Here isCool is true .

<MyComponent isCool />

Although, if you want to set it to false you need curly braces again:

<MyComponent isCool={false} />