javascript - 通过首先存储在变量中然后正确格式化来将代码字符串添加到我的 html 中？

Question

我有一个代码存储在不同文件中的导出 const 下，但是如果可能的话，我想将其作为示例包含在我的 html 中...

my-consts.js

export const myCode = styled.div`
    margin: 100px;
    ...
`

app.js

import {myCode} from './my-consts';

function addCode() {
    const block = document.getElementById('block');
    block.innerHTML = myCode;
}

...

return(
    <button onClick={addCode}>Click me</button>
    <div id="block"></div>
    ...
);

这自然不能像 myCode 那样工作。只是对某些代码的引用，因此我看到了实际代码的引用代码...

我也尝试过使用<pre>引用周围没有影响。

我的最终目标是这样的:

<pre>
export const Button = styled.button`
    font-size: 1.3em;
    background: ${props => props.primary ? "none" : "pink"};
    color: ${props => props.primary ? "pink" : "white"}
    border: 3px solid pink;
    margin: 10px;
    cursor: pointer;
`
</pre>

当我单击不同的按钮时，我将更改显示 block 中的代码，因此我不希望对其进行硬编码...

Answer 1

扩展@ShubhanuSharma ( See this sandbox for a quick solution ) 的评论，结果发现似乎不可能从变量中以字符串形式提取代码； IE。将 const myVar = 'hello world'; 之类的内容提取为完整字符串:"const var = 'hello world';"...

因此，下一个最好的办法是用 this 定义一个 const，本质上是将 const 复制粘贴到字符串化格式中......

export const myconsts = {
    'const1': `const myCode = styled.div\`
    margin: 100px;
    ...
    \``,
    'const2': ... 
}

并使用函数将它们拉入:

import {myconsts} from './file';

function addCode(code) {
    const block = document.getElementById('code-block');
    block.innerHTML = myconsts.code;
}

使用 HTML:

<button onClick="addCode('const1')">Click me</button>
<div id="code-block"></div>