Question

我正在学习反应模式-渲染道具。所以我转到这篇文章，但是当我要完成它时，我发现自己无法弄清楚“靠近”的含义。

在page的底部：

在无法静态定义prop的情况下（例如，因为您需要关闭组件的道具和/或状态）改为扩展React.Component。

我在这里补充代码：

'use strict';

class Cat extends React.Component {
    render() {
        const mouse = this.props.mouse;
        return (
            <img src="image/cat.png" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
        );
    }
}

class Mouse extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.state = { x: 0, y: 0 };
    }

    handleMouseMove(event) {
        this.setState({
            x: event.clientX,
            y: event.clientY
        })
    }

    render() {
        return (
            <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
                {this.props.children(this.state)}
            </div>
        )
    }
}

class MouseTracker extends React.Component {
    renderTheCat(mouse) {
        return <Cat mouse={mouse} />;
    }

    render() {
        return (
            <div style={{ height: '100%' }}>
                <h1>Move the mouse around!</h1>
                <Mouse>
                    {this.renderTheCat}
                </Mouse>
            </div>
        )
    }
}

ReactDOM.render(
    <MouseTracker />, document.getElementById('root')
);

根据该文章，为了避免消除使用React.PureComponent的影响，我可以将render prop定义为原型上的实例方法。但是，如果我不能静态定义渲染道具，则应改用React.Component。我想知道在什么情况下不能静态定义渲染道具。

“反应结束”在这篇反应文章中是什么意思？

0 个答案: