mount(new LikeButton(), wrapper) 找不到


  • 0

    你好,麻烦问下抽象公共组件时, mount(new LikeButton(), wrapper)中的 wrapper 找不到是什么情况呢?


  • 0
    administrators

    @imdwpeng 贴一下代码?


  • 0

    此回复已被删除!

  • 0

    @胡子大哈
    class Component {
    setState(state) {
    const oldEl = this.el;
    this.state = state;
    this.el = this._renderDOM();
    if (this.onStateChange) this.onStateChange(oldEl, this.el);
    }

    _renderDOM() {
        this.el = createDOMFromString(this.render());
        if (this.onClick) {
            this.el.addEventListener('click', this.onClick.bind(this), false)
        }
        return this.el
    }
    

    }

    const mount = (component, wrapper) => {
    wrapper.appendChild(component._renderDOM());
    component.onStateChange = (oldEl, newEl) => {
    wrapper.insertBefore(newEl, oldEl);
    wrapper.removeChild(oldEl);
    }
    };

    //字符串转成相应的 DOM 元素
    const createDOMFromString = (domString) => {
    const div = document.createElement('div');
    div.innerHTML = domString;
    return div;
    };

    class LikeButton extends Component {
    constructor(props) {
    super(props);
    this.state = {isLiked: false}
    }

    onClick() {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }
    
    render() {
        return `
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `
    }
    

    }

    mount(new LikeButton(), wrapper);


  • 0
    administrators

    @imdwpeng 可以先把代码调整成 markdown 的语法


  • 0

    @胡子大哈

    class Component {
        setState(state) {
            const oldEl = this.el;
            this.state = state;
            this.el = this._renderDOM();
            if (this.onStateChange) this.onStateChange(oldEl, this.el);
        }
    
        _renderDOM() {
            this.el = createDOMFromString(this.render());
            if (this.onClick) {
                this.el.addEventListener('click', this.onClick.bind(this), false)
            }
            return this.el
        }
    }
    
    const mount = (component, wrapper) => {
        wrapper.appendChild(component._renderDOM());
        component.onStateChange = (oldEl, newEl) => {
            wrapper.insertBefore(newEl, oldEl);
            wrapper.removeChild(oldEl);
        }
    };
    
    
    //字符串转成相应的 DOM 元素
    const createDOMFromString = (domString) => {
        const div = document.createElement('div');
        div.innerHTML = domString;
        return div;
    };
    
    class LikeButton extends Component {
        constructor(props) {
            super(props);
            this.state = {isLiked: false}
        }
    
        onClick() {
            this.setState({
                isLiked: !this.state.isLiked
            })
        }
    
        render() {
            return `
            <button class='like-btn'>
              <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
              <span>👍</span>
            </button>
          `
        }
    }
    
    mount(new LikeButton(), wrapper);
    
    

  • 0
    administrators

    @imdwpeng

    http://huziketang.com/books/react/lesson2

    0_1495460496080_upload-312d386d-24ae-489d-946f-8d19e210beb4

    第一行,你需要把 wrapper 进行定义,可以按照书上代码的顺序一步步调会比较好,因为书上的代码都是按顺序进行演变的。


  • 0

    @胡子大哈 哈哈,手残了,这段之前敲过了,后来被我删了,我说怎么突然冒出个 wrapper 呢,谢啦


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待