Question

我尝试React和反应打字员。

我有一些问题。然后我将一个更改状态的闭包传递给“onTypingDone”并调用它，但是没有正常工作。我认为因为打字员可能不会重新渲染内部组件。例如，以下代码。以下代码无效。

我如何正常工作？

import * as React from 'react';
import Typist from 'react-typist';

export interface Props {}
export interface State {
    className: string
}

export MyComponents extends React.Component<Props, State> {
    constructor(props: Props)
    {
        super(props);
        this.state = { className: "before" };
    }

    switch() {
        this.setState({ className: "after" });
    }

    render()
    {
        <Typist onTypingDone={this.switch.bind(this)}>
            <div className={this.state.className}>
                <p>Hello.</p>
            </div>
        </Typist>
    }
}

Answer 1

当我深入研究代码时发现真正的问题，打字员停止重新渲染，

this.state.className指向MyComponents，但是Typist中的内容不会重新渲染，原因是打字员组件

中的shouldComponentUpdate函数

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.textLines.length !== this.state.textLines.length) {
        return true;
    }
    for (let idx = 0; idx < nextState.textLines.length; idx++) {
        const line = this.state.textLines[idx];
        const nextLine = nextState.textLines[idx];
            if (line !== nextLine) {
                return true;
            }
    }
    return this.state.isDone !== nextState.isDone;
}

shouldComponentUpdate：
如果shouldComponentUpdate（）返回false，则不会调用
render（）。

您可以通过以下方式实现解决方案：

<div className={this.state.className}>
    <Typist onTypingDone={this.switch.bind(this)}>
            <p>Hello.</p>
    </Typist>
</div>

我的代码无法更新嵌套组件

1 个答案: