通过首先存储在一个变量中，然后正确格式化，将一串代码添加到我的 html 中？

Question

I have a code stored under an exported const in a different file, however I would like to include this as an example in my html if possible...

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>
    ...
);

This naturally doesn't work as myCode is simply a reference to some code, so I am presented with a reference code to the actual code...

I have also tried using <pre> around the ref to no affect.

My eventual goal would be like this:

 <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>

I will be changing the code in the display block when I click different buttons, so I do not wish to hardcode this...

Answer 1

Expanding on the comment made by @ShubhanuSharma ( See this sandbox for a quick solution ), it turns out that it doesn't seem possible to extract code as a string from a variable; ie. extracting something like const myVar = 'hello world'; as a full string: "const var = 'hello world';" ...

So the next best thing is to define a const with this in, essentially copy-pasting the const into a stringified format...

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

and pulling them in with the function:

import {myconsts} from './file';

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

with the HTML:

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