Question

是否可以将JSX放在一个用作React渲染道具的模板字符串中？

这就是我要做的，但它会导致链接呈现为[object Object]

const Container = ({ message }) => <div className="from line 4"> {message}</div>;
const Link = () => <a href="#">juan</a>;

const App = () => (
  <div>
    <Container message={`My message with a ${<Link />}`} />
  </div>
);

我尝试的一件事是在message内放置JSX而不是模板字符串。这有效，但它引入了一个不需要的新div。

<Container
  message={<div>My message {<Link />}</div>}
/>

我做了codesandbox来说明问题

Answer 1

您可以使用Fragment像您尝试的那样呈现内联并阻止添加新的包裹<div />：

const App = () => (
  <div>
    <Container
      message={<React.Fragment>My message with a <Link /></React.Fragment>}
    />
  </div>
);

以下是使用React.Fragment的代码框的分叉版本：https://codesandbox.io/s/nrmr9l34vl

你可以在React渲染道具中的模板字符串中使用jsx吗？

1 个答案: