问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react渲染模板数据

头像
simple_5820793e901a0
    26055073
    头像
    zunlin118
      437787130
      `请输入代码`将HTML模板中的数据替换掉push进数组，再将数组render出来，界面只显示HTML代码，程序body如下：
<body>
<div id="wrap"></div>
<script src="data.js"></script>
<script type="text/babel">
    let SingleImg = React.createClass({
        render:function () {
            let settings = data,
                _html = `<div class="photo">
                        <div class="wrapper photo_front">
                            <div class="front">
                                <div class="img">
                                    <img src="img/{imgSrc}" alt="index"/>
                                    <p>{imgName}</p>
                                </div>
                            </div>
                            <div class="back">
                                <p>{imgTxt}</p>
                            </div>
                        </div>
                   </div>`,
                result = [],
                len = data.length,
                i = 0;
            for(;i<len; i++){
                result.push(_html
                    .replace(/\{imgSrc\}/,settings[i].imgSrc)
                    .replace(/\{imgName\}/,settings[i].title)
                    .replace(/\{imgTxt\}/,settings[i].txt)
                );
            }
            return <div >
                {result}
                   </div>
        }
    });
    var wrap = document.getElementById('wrap');
    ReactDOM.render(
        <SingleImg/>,
        wrap
    );
</script>
</body>
      reactjavascript
      阅读 3.6k
      1 个回答
      得票最新
      头像
      joe_sky
        2693

        React为了防止xss会对传入组件的html字符串进行转义所以才会这样。传入动态的html字符串可以用dangerouslySetInnerHTML：

        ...
render() {
  ...
  return <div dangerouslySetInnerHTML={{ __html: result }}></div>
}
...
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题