Question

I am creating a react styleguide. I am not using any markdown.I want to display component, description, source code of the component. I can display them using code tag if I keep the entire source code in a variable and display them. (see below)

 render() {
   var text = `<h1>Helllooo</h1>`;
    return (
     <div>
       <pre>
         <code>
           {text}
         </code>
       </pre>
     </div>
   );
 }

But is there any way I can get the source code using a url and display inside code tag for example get the code from components/Button/index.js and display it inside code tag ? Please help!

Answer 1

有一些库可能会帮助您完成您想要做的事情。尝试搜索＆＃39; jsx到字符串＆＃39;。

我亲自使用react-element-to-jsx-string并且效果很好。

Answer 2

您在这里尝试做的是使用React呈现HTML标记。您的标记仍然可以采用字符串格式，但理想情况下，它们应该通过道具接收，而不是在组件中进行硬编码。

默认情况下，React提供_notification.Clients.User(id).InvokeAsync("SendMes");作为完成此操作的方法。但出于安全原因，我们不建议这样做 - https://reactjs.org/docs/dom-elements.html

正如Grandas建议的那样，尝试使用库或插件来做同样的事情。 dangerouslySetInnerHTML是我能想到的另一种选择 - https://github.com/remarkablemark/html-react-parser

Answer 3

您可以尝试将其存储在数组中而不是Sting

您可以访问https://jsfiddle.net/rajatdhoot/ara1mdam/1/ 运行代码

class Hello extends React.Component {
 render() {
  var text = [<h2>Hello</h2>]
   return text
  }
 }
 ReactDOM.render(
  <Hello />,
  document.getElementById('container')
 );

Html代码

<div id="container">
</div>

使用<code> tag

3 个答案: