如何将导出的styled-components代码变量正确插入HTML展示？

你遇到的核心问题很明确：myCode是styled-components生成的组件对象，不是你写的源码文本，所以直接赋值给innerHTML只会显示对象的字符串表示，而不是代码本身。下面是两种简单可行的解决方案，满足你动态切换展示代码的需求：

方案一：分离代码文本与组件定义（最直观） #

把你要展示的代码文本单独存为字符串，再用它来创建styled组件，这样既能正常使用组件，又能拿到纯文本代码用于展示：

1. 改造my-consts.js #

import styled from 'styled-components';

// 1. 单独存储要展示的代码文本
export const myCodeText = `
margin: 100px;
// 这里放你的其他样式代码
`;

// 2. 用文本创建styled组件
export const myCode = styled.div`${myCodeText}`;

// 如果是带props的组件（比如你示例中的Button）
export const buttonCodeText = `
font-size: 1.3em;
background: ${props => props.primary ? "none" : "pink"};
color: ${props => props.primary ? "pink" : "white"};
border: 3px solid pink;
margin: 10px;
cursor: pointer;
`;

export const Button = styled.button`${buttonCodeText}`;

2. 修改app.js中的展示逻辑 #

导入代码文本字符串，点击按钮时将其插入到<pre>标签中（用textContent确保格式和特殊字符被正确保留）：

import { myCodeText, buttonCodeText } from './my-consts';

function showMyCode() {
  const block = document.getElementById('block');
  // 拼接成完整的代码结构，和你写的源码一致
  block.textContent = `export const myCode = styled.div\`\n${myCodeText}\n\``;
}

function showButtonCode() {
  const block = document.getElementById('block');
  block.textContent = `export const Button = styled.button\`\n${buttonCodeText}\n\``;
}

// 渲染部分
return(
  <>
    <button onClick={showMyCode}>Show My Div Code</button>
    <button onClick={showButtonCode}>Show Button Code</button>
    {/* 用pre标签保证代码格式 */}
    <pre id="block"></pre>
  </>
);

方案二：使用Tag函数避免重复代码（进阶） #

如果不想重复写样式代码（既要给styled组件用，又要存成文本），可以自定义一个Tag函数，同时生成组件和代码文本：

1. 自定义Tag函数 #

import styled from 'styled-components';

// 自定义tag函数，同时返回组件和代码文本
function styledWithCode(strings, ...values) {
  // 拼接出完整的代码文本
  const codeText = strings.reduce((result, str, index) => {
    return result + str + (values[index] ? values[index].toString() : '');
  }, '');
  
  return {
    // 返回创建好的styled组件
    component: styled.div(strings, ...values),
    // 返回可展示的代码文本
    code: codeText
  };
}

// 使用这个函数创建组件
const { component: myCode, code: myCodeText } = styledWithCode`
margin: 100px;
padding: 20px;
`;

// 同样支持带props的组件
const { component: Button, code: buttonCodeText } = styledWithCode`
font-size: 1.3em;
background: ${props => props.primary ? "none" : "pink"};
color: ${props => props.primary ? "pink" : "white"};
border: 3px solid pink;
margin: 10px;
cursor: pointer;
`;

export { myCode, myCodeText, Button, buttonCodeText };

2. 展示逻辑和方案一一致 #

同样在app.js中导入代码文本，通过点击按钮切换渲染到<pre>标签即可。

为什么之前的方法不生效？ #

当你把myCode（styled组件对象）赋值给innerHTML时，JavaScript会自动把对象转换成字符串，最终显示的是[object Object]或者组件的内部toString结果，完全不是你写的源码文本。只有直接操作代码字符串，才能在页面上展示出你想要的示例效果。

内容的提问来源于stack exchange，提问作者physicsboy