javascript - 重构UNSAFE_componentWillReceiveProps

我有一个受this post启发的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被认为是不安全的，我正在尝试摆脱它。

The ways React advices to refactor componentWillReceiveProps基本上是使用static getDerivedStateFromProps或componentDidUpdate

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

一个人将如何重构此代码？

最佳答案

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

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中管理ID。

<IFrameComponent id='1' />
<IFrameComponent id='2' />