React反模式 —— 如何不使用JSX地动态显示组件

欢迎指导与讨论 : )

  前言

    文章的最后能写出以 Modal.open( ) 这种调用形式,动态显示React对话框组件的写法(类似于ant design),同时涉及数据交互(数据能异步地返回给调用者)。笔者将和大家一起探讨这种写法的大概思路、难点,细节问题欢迎指出和补充。 O(∩_∩)O

    本文Demo地址:https://github.com/Penggggg/react-model-demo

    关于Angular-1的动态组件的思路的Demo地址:https://github.com/Penggggg/angular-component-practices

    欢迎 Star ~

 

  最终效果图

// 调用代码
import Model from './Model;

    onClick = ( ) => {
        Model.show({ msg: 'Are you a Man?', title: 'Hello!' })
            .then(( value: string ) => {
               // 点击Yes按钮后返回的数据
                console.log(` value: ${value}`);
            })
            .catch( e => {
              // 点击No按钮后返回的数据
                 console.log(`e`);
            })
    }    

React反模式 —— 如何不使用JSX地动态显示组件_第1张图片

 

  探讨1:如何不使用JSX也能显示React.Component实例

    主要思路是:实例化一个组件 --> 渲染成Dom --> 插入到body元素内。

    其中实例化与渲染成Dom可以使用ReactDomrender函数去完成:  let _model = ReactDom.render(, div); 其中 div 是这个组件实例的一个容器(container dom),我们可以这样生产这个容器dom:  let div = document.createElement('div'); 。最后只需要把渲染结果插入到body元素中: document.querySelector('body').appendChild( div );

// 组合起来就是
 
let div = document.createElement('div');
let _model = ReactDom.render(, div);
let dom = document.querySelector('body').appendChild(div);

 

  探讨2:交互数据如何异步地返回给调用者

    由于Modal组件涉及到数据交互(我们需要知道用户点击了Yes还是No),因此我们还需要将完成点击之后的数据异步地返回给调用者。同时,由于Modal的调用模式是 Modal.show( ) ,因此我决定在 Modal.show( ) 执行时,返回一个Promise给调用者

// 因此,整个调用模式看起来会像:

Model.show( )
    .then(( value: string ) => {
           // 点击Yes后的代码(可以拿到数据value)
     })
     .catch( e => {
           // 点击No后的代码
     })

    现在就剩下如何实现上面所说的了。

    首先由于Modal是一个Class(类),因此我们需要把show函数作为Model 类的静态方法:

// Modal.js

export default class Model extends React.PureComponent{
    
      static show( ) { // .... }
  
}

    其次,我们需要返回一个实例的Promise,并且能够在Modal类方法地任意地方能够调用这个Promise实例  resolve( ) 和  reject( ) 方法从返回数据给调用者,因此我们把代码改动为

// Modal.js

export default class Model extends React.PureComponent{
     _resolve;
     _reject;
     _promise = new Promise (( resolve, reject) => {
        this._resolve = resolve;
        this._reject = reject;
    })

     static show( ) { // .... }
  
}

    然后,为静态方法show( )函数加上一些逻辑:

// 静态方法show( )

 static show( ) {
        // 弹出成功!
        let div = document.createElement('div');
        let _model: any = ReactDom.render(, div);
        let dom = document.querySelector('body').appendChild(div);

       // 还记得我们需要return 一个promise吗
       return _model._promise;
} 

    注意,这里的重点是:ReactDom.render( )会返回一个组件实例的js引用,而body.append( )会返回这个组件实例的dom引用,这两点很重要。

 

  探讨3:点击按钮执行返回数据

    有了上面的代码,这部分的实现就容易多了。首先先在Model的render函数里面把对话框的基本结构写出来(JSX),然后是为Yes/No按钮

转载于:https://www.cnblogs.com/BestMePeng/p/React_modal.html

你可能感兴趣的:(javascript,ViewUI)