JS：将变量值转换为字符串文字

Question

我发现自己陷入了困境22。我试图创建一个呈现代码的React组件。基本上，我可以在行编号，语法高亮等中包含一个pre节点。但是，我一开始就陷入困境。

如何将代码段传递给props.children，然后在组件中呈现它？下面是基本设置：

<CodeBlock>
    <div>Hello Hackers!</div>
</CodeBlock>


export const CodeBlock = (props) => {
    return(
        <pre>
            {props.children}
        </pre>
    );
}
// This evaluates as a rendered div


export const CodeBlock = (props) => {
    return(
        <pre>
            {`props.children`}
        </pre>
    );
}
// This evaluates literally as `props.children`


<CodeBlock>
    {`<div>Hello Hackers!</div>`}
</CodeBlock>
// This works but it's messy for the end-user