Question

在/home/:id中，我有一个<LogButtons/>，当它被单击时logOn()被调用，因此logsignPopUp变量变成了<logForm/>组件。

在同一页面上，我有一个<IframeYoutubeComponent/>，我想阻止它在屏幕上弹出<logForm/>时重新呈现，以便不重新加载视频。< / p>

home.js：

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { logsign: "" };
        this.logOn = this.logOn.bind(this);
        this.signOn = this.signOn.bind(this);
    }

    logOn() {
        this.setState({ logsign: "log" });
    }

    render() {

        let logsignPopUp = this.props.logsign === "log" ? <LogForm/> : this.state.logsign;

        let homePage =
        <div>
            {logsignPopUp}
            <div>
                <LogButtons logOn={this.logOn}/>
            </div>
            <div>
                <IframeYoutubeComponent paramsId={this.props.match.params.paramsId}/>
            </div>
        </div>;

    return (
        <div>
            <Route exact path="/home/:id" component={() => <div>{homePage}</div> } />
        </div>
    );
  }
}

iframeYoutubeComponent.js：

export class IframYoutubeComponent extends Component {
    render() {
        //this.props.youtube come from Redux state
        let src = this.props.youtube.find(el => el.youtubeId === this.props.paramsId);
            return (
                <iframe src={"https://www.youtube.com/embed/" + src}></iframe>
            );
    }
}

我试图在shouldComponentUpdate（）中返回false，但它甚至没有被调用：

shouldComponentUpdate() {
    console.log("test");
    return false;
}

我尝试将PureComponent用于<IframeYoutubeComponent/>，但是在弹出<logForm/>时仍会重新加载视频。

我尝试将密钥添加到组件中，还尝试将this.state.logsign放入Redux中，但没有解决问题。

我从2个月开始就开始做出反应，所以我可能会错过一些显而易见的事情，但我无法发现……任何想法吗？

Answer 1

那是因为您正在将component道具中的箭头功能传递给Route。这样，每次您生成新功能时就可以使用。

您应该在此prop中传递一个react组件，或者至少传递一个返回JSX的函数，但是该函数应该定义一次。例如作为类方法。

类似的东西：

<div>
  <Route exact path="/home/:id" component={this.renderHomePage} />
</div>

但是当然，您必须重构有关此logsign道具的逻辑。

无法阻止使用shouldComponentUpdate（）或PureComponent重新呈现

1 个答案: