1

我有一个IFrameComponent组件，受这篇文章的启发。

它看起来基本上是这样的：

class IFrameComponent extends React.Component {
    shouldComponentUpdate() {
        return false;
    }

    componentWillReceiveProps(nextProps) {
        if(this.props.content !== nextProps.content) {
            const html = getHTMLFromContent();
            const fdoc = this.iFrame.contentDocument;
            fdoc.write(html);
        }
    }

    render() {
        return (<iframe sandbox="..." ref={f => this.iFrame = f} />);
    }
}

现在这componentWillReceiveProps被认为是不安全的，我正试图摆脱它。

React 建议重构 componentWillReceiveProps的方式基本上要么使用static getDerivedStateFromProps要么componentDidUpdate

可悲的是，componentDidUpdate永远不会被调用，因为shouldComponentUpdate返回 false （我认为这很好？）而且我无法在静态方法中访问 this.iFrame 引用getDerivedStateFromProps。

如何重构这段代码？

4

1 回答 1

1

我认为，一种可能的方法是：

let iFrameRefs = {}

class IFrameComponent extends React.Component {
    static getDerivedStateFromProps (props) {
        if (iFrameRefs[props.id]) {
            const html = getHTMLFromContent();
            const fdoc = iFrameRefs[props.id].contentDocument;
            fdoc.write(html);
        }
        return null
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (<iframe sandbox="..." ref={f => iFrameRefs[this.props.id] = f} />);
    }
}

现在从父组件将唯一的 id 传递给每个组件。您还可以在IFrameComponent.

<IFrameComponent id='1' />
<IFrameComponent id='2' />
于 2018-06-14T13:15:51.000 回答