資訊專欄INFORMATION COLUMN
摘要：如何將代碼放到自定義的中真實(shí)經(jīng)歷最近開發(fā)項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)圖片的預(yù)覽并下載，想著也不難，自己寫一個(gè)預(yù)覽效果吧。
如何將jsx代碼放到自定義的dom中？ - Eric
真實(shí)經(jīng)歷
最近開發(fā)項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)圖片的預(yù)覽并下載，想著也不難，自己寫一個(gè)預(yù)覽效果吧。其實(shí)預(yù)覽就是一個(gè)彈窗(Modal)，實(shí)現(xiàn)彈窗有兩種方案：
1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下：
/* Img */
class RenderImg extends Component {
state = {
showModal: false,
};
// 打開預(yù)覽
openModal = ()=>{
this.setState({ showModal: true });
}
// 關(guān)閉預(yù)覽
closeModal = ()=>{
this.setState({ showModal: false });
}
render(){
let {showModal} = this.state;
let {text, url} = this.props;
return (
{text}
{
showModal &&
{/*somecode....*/}
}
);
}
}
這樣做的缺點(diǎn)是彈窗代碼很多，直接和按鈕放一起，不太好。
2、通過js創(chuàng)建dom，然后放到body的最下面，很多組件都是這么寫的，代碼大概如下：
/* 圖片類型 */
class RenderImage extends Component {
//彈窗
_modal = null;
// 打開預(yù)覽
openModal = ()=>{
this._modal = this.createModal();
this._modal.show();
}
// 關(guān)閉預(yù)覽
closeModal = ()=>{
this._modal.hidden();
}
// 下載
download = ()=>{
downloadFile(this.props.url)
}
//創(chuàng)建Modal
createModal = ()=>{
let _this = this;
return {
_elem: null,
//顯示
show: function(){
//此處是重點(diǎn)
},
//關(guān)閉
hidden: function(){
this._elem && this._elem.remove();
}
};
}
//創(chuàng)建元素
createElem = ()=>{
let {text, url} = this.props;
return (
{/*somecode...*/}
);
}
render(){
let {text, url} = this.props;
return {text};
}
}
因?yàn)閺棿暗膬?nèi)容比較多，所以創(chuàng)建彈窗代碼的時(shí)候使用了jsx，我們知道jsx代碼不能直接通過appendChild放到創(chuàng)建的dom元素中，突然靈光一閃，想到了好久不用的React基礎(chǔ)寫法ReactDOM.render(template, dom).
正片環(huán)節(jié)(ReactDOM.render)
如果我們想在html文件中直接使用react，那我們就要用到ReactDOM.render，作用就是將jsx代碼轉(zhuǎn)化為HTML代碼，并插入指定的dom節(jié)點(diǎn)中，來一段簡(jiǎn)單的代碼：
總結(jié)
如果想把jsx代碼轉(zhuǎn)化為html代碼，就可以使用ReactDOM.render，那么上面的show方法我們就可以這么寫：
show: function(){
this._elem = document.createElement("div");
ReactDOM.render(_this.createElem(), this._elem);
document.body.appendChild( this._elem );
}
思考：圖片在自適應(yīng)大小的情況下，如何做到讓圖片水平和垂直居中顯示？
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99033.html
摘要：如何將代碼放到自定義的中真實(shí)經(jīng)歷最近開發(fā)項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)圖片的預(yù)覽并下載，想著也不難，自己寫一個(gè)預(yù)覽效果吧。 如何將jsx代碼放到自定義的dom中？ - Eric 真實(shí)經(jīng)歷 最近開發(fā)項(xiàng)目的時(shí)候，需要實(shí)現(xiàn)圖片的預(yù)覽并下載，想著也不難，自己寫一個(gè)預(yù)覽效果吧。其實(shí)預(yù)覽就是一個(gè)彈窗(Modal)，實(shí)現(xiàn)彈窗有兩種方案：1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下： /* I...
摘要：基礎(chǔ)創(chuàng)建虛擬參數(shù)元素名稱，例如參數(shù)屬性集合，例如，，，從參數(shù)開始，表示該元素的子元素，通常這些元素通過創(chuàng)建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁面中。 React簡(jiǎn)介 FeceBook開源的一套框架，專注于MVC的視圖V模塊。實(shí)質(zhì)是對(duì)V視圖的一種實(shí)現(xiàn)。 React框架的設(shè)計(jì)沒有過分依賴于某個(gè)環(huán)境，它自建一套環(huán)境，就是virtual DOM（虛擬DOM）。 提供基礎(chǔ)AP...
摘要：前言是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個(gè)角度去解讀從零開始實(shí)現(xiàn)一個(gè)，從層面實(shí)現(xiàn)的大部分功能，在這個(gè)過程中去探索為什么有虛擬為什么這樣設(shè)計(jì)等問題。 前言 React是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個(gè)角度去解讀React：從零開始實(shí)現(xiàn)一個(gè)React，從API層面實(shí)現(xiàn)React的大部分功能，在這個(gè)過程中去探索為什么有虛擬DOM、d...
摘要：綁定事件后的返回值。設(shè)置屬性，將要設(shè)置的新屬性，該狀態(tài)會(huì)和當(dāng)前的合并，可選參數(shù)，回調(diào)函數(shù)。方法與類似，但它會(huì)刪除原有強(qiáng)制更新參數(shù)說明，可選參數(shù)，回調(diào)函數(shù)。判斷組件掛載狀態(tài)返回值或，表示組件是否已掛載到中方法用于判斷組件是否已掛載到中。 React 特點(diǎn) 聲明式設(shè)計(jì) ?React采用聲明范式，可以輕松描述應(yīng)用。 高效 ?React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。 靈活...
摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當(dāng)一個(gè)表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風(fēng)頭一時(shí)無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨(dú)特的jsx...
閱讀 2479·2021-11-11 11:01
閱讀 3373·2021-10-11 10:57
閱讀 2726·2021-09-30 09:46
閱讀 3542·2021-07-26 23:38
閱讀 1618·2019-08-29 12:22
閱讀 700·2019-08-29 11:28
閱讀 2417·2019-08-26 14:04
閱讀 3120·2019-08-23 18:34
