React:传递一个模板字面值作为prop

Question

我有一个组件，它有一个边框:string prop (typescript)。我想传递这个prop的方式如下:

<Button border={`'1px solid' ${borderColor}`} />

其中${borderColor}是一个状态变量。当硬编码边框时，我的道具正在工作，像这样:

<Button border="1px solid black" />

但是我怎么能使它工作时，混合字符串/状态变量?

感谢

Answer 1

在这个代码示例中，您可以删除1px solid周围的引号，它应该为您工作。对于模板字符串，勾号(')是您唯一需要的字符串包装器!

下面是一个演示，向你展示它是如何工作的:https://codesandbox.io/s/magical-glitter-sbjrqf?file=/src/App.js

Answer 2

尝试:

<Button border={`1px solid ${borderColor}`} />

你可以在这里阅读更多关于模板字面值的内容:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals