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

【问题标题】：Can you use jsx within template string in React render props?你可以在 React 渲染道具的模板字符串中使用 jsx 吗？
【发布时间】：2018-05-21 12:37:34
【问题描述】：

是否可以将 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来说明问题

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您可以使用Fragment 像您尝试那样进行内联渲染，并防止添加新的包装<div />：

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

这是使用 React.Fragment 的 Codesandbox 的分叉版本：https://codesandbox.io/s/nrmr9l34vl

【讨论】：