Question

假设我在React中有一个简单的组件，我不仅想使用该组件本身，还想使用它在屏幕上显示的代码？我怎样才能做到这一点？

这正是我正在做的

import Anything from ../../'anywhere';

const CustomComponent = () => {
    return (
        <div>
            <Anything />
        </div>
    )
}

export default CustomComponent;

然后在另一个文件中

import CustomComponent from './custom-component';

return (
    <div codeHighlightStr={CustomComponentString}>
        <CustomComponent />
    </div>
)

我不知道如何从同一模块中获取CustomComponentString

Answer 1

您可以通过查询'jsx to string'使用ReactDomServer.renderToString方法或某些npm包

Answer 2

您可以使用<xmp>标签。

 render(){
    return (<div>
       <xmp>
       let test='SomeValue';
       document.getElementById('someElement').innetHTML = test;
       </xmp>
    </div>)
}

DEMO

如何将模块代码获取为字符串javascript

2 个答案: