如何将jsx代码放到自定义的dom中？- ReactDOM.render - React
如何将jsx代码放到自定义的dom中？ - Eric
真实经历
最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：
1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下：
/* Img */
class RenderImg extends Component {
state = {
showModal: false,
};
// 打开预览
openModal = ()=>{
this.setState({ showModal: true });
}
// 关闭预览
closeModal = ()=>{
this.setState({ showModal: false });
}
render(){
let {showModal} = this.state;
let {text, url} = this.props;
return (
<Fragment>
<a href="javascript:;" onClick={this.openModal}>{text}</a>
{
showModal &&
<div className="modal-preview preview-image">
{/*somecode....*/}
</div>
}
</Fragment>
);
}
}这样做的缺点是弹窗代码很多，直接和按钮放一起，不太好。
2、通过js创建dom，然后放到body的最下面，很多组件都是这么写的，代码大概如下：
/* 图片类型 */
class RenderImage extends Component {
//弹窗
_modal = null;
// 打开预览
openModal = ()=>{
this._modal = this.createModal();
this._modal.show();
}
// 关闭预览
closeModal = ()=>{
this._modal.hidden();
}
// 下载
download = ()=>{
downloadFile(this.props.url)
}
//创建Modal
createModal = ()=>{
let _this = this;
return {
_elem: null,
//显示
show: function(){
//此处是重点
},
//关闭
hidden: function(){
this._elem && this._elem.remove();
}
};
}
//创建元素
createElem = ()=>{
let {text, url} = this.props;
return (
<div className="modal-preview preview-image">
{/*somecode...*/}
</div>
);
}
render(){
let {text, url} = this.props;
return <a href="javascript:;" onClick={this.openModal}>{text}</a>;
}
}因为弹窗的内容比较多，所以创建弹窗代码的时候使用了jsx，我们知道jsx代码不能直接通过appendChild放到创建的dom元素中，突然灵光一闪，想到了好久不用的React基础写法ReactDOM.render(template, dom).
正片环节(ReactDOM.render)
如果我们想在html文件中直接使用react，那我们就要用到ReactDOM.render，作用就是将jsx代码转化为HTML代码，并插入指定的dom节点中，来一段简单的代码：
<html>
<head>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let userName = "Eric";
ReactDOM.render(
<div>谢谢观看{userName}的文章，喜欢就点赞转发吧!</div>,
document.getElementById("app")
);
</script>
</body>
</html>总结
如果想把jsx代码转化为html代码，就可以使用ReactDOM.render，那么上面的show方法我们就可以这么写：
show: function(){
this._elem = document.createElement("div");
ReactDOM.render(_this.createElem(), this._elem);
document.body.appendChild( this._elem );
}思考：图片在自适应大小的情况下，如何做到让图片水平和垂直居中显示？
相关推荐
bowean 2020-06-28
outsiderlcy 2019-12-05
ZZZhangbingyi 2019-11-17
gavinvong 2019-11-04
jiangbo0 2019-09-18
Godfavoredone 2019-07-01
前端栈开发 2019-06-30
DolphinThinker 2019-06-29
jluzh00 2019-06-29
lujingjing 2019-06-29
韩吉鑫 2019-06-29
82530995 2019-06-29
cjb 2019-06-28
softwear 2019-06-28
lzxy 2019-06-28
FoolishInfanta 2016-03-29
wxuande 2019-06-27
JackXue程序生涯 2019-06-27
mojianc 2019-06-27