渲染HTML字符串通过自定义分析

反应组件我有一个HTML字符串从服务器获取它看起来像这样：渲染HTML字符串通过自定义分析

<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>

现在我要变换的HTML与<img class="cover" src="someimg.jpg">部分转换为自己的阵营组件<LazyLoadImg className="cover" src="someimg.jpg" />。

没有服务器渲染或危险的SetInnerHTML，我该怎么做？

来源

2016-04-27 movila

为什么你需要获取整个HTML字符串？难道你不能只抓取类和src属性，并在渲染时将它们弹出到React组件中？ –

那么，使用ExpressJS和所见即所得编辑器构建后端的人呢。所以，在前端我只能从WYSIWYG编辑器解析的html字符串中检索结果。 – movila

您的HTML字符串。

let responseText = '<h1>Title</h1>\n<img class="cover" src="someimg.jpg">\n<p>Introduction</p>';

以换行符分割字符串。

let splitter = /\n/; 
let broken = responseText.split(splitter);

从这里，剥离标签以获取您真正需要的东西是一项非常简单的任务。

broken[0] = broken[0].slice(4, broken[0].length - 5); 
broken[1] = broken[1].slice(24, broken[1].length - 3); 
broken[2] = broken[2].slice(3, broken[2].length - 4);

繁荣。

console.log(broken); // [ 'Title', 'someimg.jp', 'Introduction' ]

确保以上所有逻辑都在组件的正确位置结束。我假设你通过AJAX调用收到了原始字符串。可能把所有的东西放在回调中。

这是你的组件。

class ProfileSection extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    state = { 
    } 
    render() { 
    return (
     <div> 
     <h1>{broken[0]}</h1> 
     <LazyLoadImg className="cover" src={broken[1]} /> 
     <p> 
      {broken[2]} 
     </p> 
     </div> 
    ); 
    } 
}

来源

2016-04-28 07:36:42

渲染HTML字符串通过自定义分析

回答

相关问题