脚本宝典收集整理的这篇文章主要介绍了如何将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 );
}
思考：图片在自适应大小的情况下，如何做到让图片水平和垂直居中显示？
以上是脚本宝典为你收集整理的如何将jsx代码放到自定义的dom中？- ReactDOM.render - React全部内容，希望文章能够帮你解决如何将jsx代码放到自定义的dom中？- ReactDOM.render - React所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。