在React中高效处理字符串格式CSS样式：多方案解析与实践

import React, { useEffect, useId, useMemo } from 'react';
// 假设使用一个简化的CSS解析和字符串化工具
// 实际项目中会使用更成熟的库，如 'css-tree' 或 'postcss'
const mockCssParser = {
    parse: (cssString) => {
        // 模拟解析：将CSS规则拆分成数组
        return cssString.split('}').filter(Boolean).map(rule => {
            const [selectorPart, stylePart] = rule.split('{');
            return { selector: selectorPart.trim(), styles: stylePart.trim() };
        });
    },
    stringify: (parsedRules) => {
        // 模拟字符串化
        return parsedRules.map(rule => `${rule.selector}{${rule.styles}}`).join('');
    }
};

function DynamicScopedStyles({ cssString, children }) {
    const componentId = useId().replace(/:/g, '-'); // 确保ID是有效的CSS类名部分
    const scopeClass = `scope-${componentId}`;

    const scopedCss = useMemo(() => {
        if (!cssString) return '';
        const parsedRules = mockCssParser.parse(cssString);
        const prefixedRules = parsedRules.map(rule => ({
            ...rule,
            selector: `.${scopeClass} ${rule.selector}` // 为每个选择器添加前缀
        }));
        return mockCssParser.stringify(prefixedRules);
    }, [cssString, scopeClass]);

    useEffect(() => {
        if (!scopedCss) return;
        const styleElement = document.createElement('style');
        styleElement.setAttribute('data-scope-id', componentId);
        styleElement.textContent = scopedCss;
        document.head.appendChild(styleElement);

        return () => {
            document.head.removeChild(styleElement);
        };
    }, [scopedCss, componentId]);

    return (
        <div className={scopeClass}>
            {children}
        </div>
    );
}

// 使用示例
const myStyles = `.some-class .alert{margin:0 auto}.another-class{max-width:1000px;width:100%;margin:0 auto;padding:10px}`;

function App() {
    return (
        <div>
            <h1>应用动态CSS</h1>
            <DynamicScopedStyles cssString={myStyles}>
                <div className="some-class">
                    <p className="alert">这是一个带有动态样式的段落。</p>
                </div>
                <div className="another-class">
                    <p>另一个动态样式块。</p>
                </div>
            </DynamicScopedStyles>
            <p>这是外部内容，不受动态样式影响。</p>
        </div>
    );
}

// web-component.js
class StyledContentElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this._style = document.createElement('style');
        this.shadowRoot.appendChild(this._style);

        this._wrapper = document.createElement('div');
        this.shadowRoot.appendChild(this._wrapper);
    }

    // 监听属性变化
    static get observedAttributes() {
        return ['css-string', 'html-content'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'css-string') {
            this._style.textContent = newValue;
        } else if (name === 'html-content') {
            this._wrapper.innerHTML = newValue;
        }
    }
}

// 注册自定义元素
if (!customElements.get('styled-content-element')) {
    customElements.define('styled-content-element', StyledContentElement);
}

// 在React组件中使用
import React from 'react';

function ShadowDomStyledComponent({ cssString, htmlContent }) {
    // 将HTML内容作为字符串传递，自定义元素会将其设置为innerHTML
    // 注意：如果htmlContent是React组件，需要先渲染为字符串
    return (
        <styled-content-element
            css-string={cssString}
            html-content={htmlContent}
        ></styled-content-element>
    );
}

// 使用示例
const myStyles = `.some-class .alert{margin:0 auto}.another-class{max-width:1000px;width:100%;margin:0 auto;padding:10px}`;
const myHtml = `
    <div class="some-class">
        <p class="alert">Shadow DOM 内的样式。</p>
    </div>
    <div class="another-class">
        <p>这是另一个 Shadow DOM 元素。</p>
    </div>
`;

function App() {
    return (
        <div>
            <h1>使用 Shadow DOM 隔离样式</h1>
            <ShadowDomStyledComponent cssString={myStyles} htmlContent={myHtml} />
            <p>这是外部内容，不受 Shadow DOM 样式影响。</p>
        </div>
    );
}

import React, { useRef, useEffect } from 'react';

function IframeStyledContent({ htmlContent, cssString, iframeProps = {} }) {
    const iframeRef = useRef(null);

    useEffect(() => {
        if (iframeRef.current) {
            const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;

            // 确保iframe内容清空并重新写入
            iframeDoc.open();
            iframeDoc.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <style>${cssString}</style>
                </head>
                <body>
                    ${htmlContent}
                </body>
                </html>
            `);
            iframeDoc.close();
        }
    }, [htmlContent, cssString]);

    return (
        <iframe
            ref={iframeRef}
            title="Dynamic Styled Content"
            style={{ width: '100%', height: '300px', border: '1px solid #ccc' }}
            {...iframeProps}
        />
    );
}

// 使用示例
const myStyles = `.some-class .alert{margin:0 auto; color: red;}.another-class{max-width:1000px;width:100%;margin:0 auto;padding:10px; background-color: lightblue;}`;
const myHtml = `
    <div class="some-class">
        <p class="alert">这是 iframe 内部的样式。</p>
    </div>
    <div class="another-class">
        <p>另一个 iframe 元素。</p>
    </div>
    <p style="color: green;">直接内联样式也有效。</p>
`;

function App() {
    return (
        <div>
            <h1>使用 iframe 隔离样式</h1>
            <IframeStyledContent cssString={myStyles} htmlContent={myHtml} />
            <p>这是外部内容，不受 iframe 样式影响。</p>
        </div>
    );
}