[英]Can you use jsx within template string in React render props?
Is it possible to put JSX inside a template string that is being used as a React render prop? 是否可以将JSX放在用作React渲染道具的模板字符串中?
This is what I'm trying to do, but it leads to the link rendering as [object Object]
这是我正在尝试做的事情,但是它导致链接呈现为
[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>
);
One thing I tried was to put JSX instead of a template string inside message
. 我尝试的一件事是在
message
放入JSX而不是模板字符串。 This works, but it introduces a new div
that isn't needed. 这可行,但它引入了不需要的新
div
。
<Container
message={<div>My message {<Link />}</div>}
/>
I made this codesandbox to illustrate the problem 我做了这个codeandbox来说明问题
You can use a Fragment to render inline like you are trying to do and to prevent adding a new wrapping <div />
: 您可以使用Fragment像尝试执行的那样内联渲染,并防止添加新的包装
<div />
:
const App = () => (
<div>
<Container
message={<React.Fragment>My message with a <Link /></React.Fragment>}
/>
</div>
);
Here is a forked version of your Codesandbox using React.Fragment
: https://codesandbox.io/s/nrmr9l34vl 这是使用
React.Fragment
的分叉版本: https : React.Fragment
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.