时间戳

首页 > 解决方案 > ReactJs 状态发生变化，但 iframe 没有变化

javascript - ReactJs 状态发生变化，但 iframe 没有变化

问题描述

我是新手，我想在我的应用程序的每个菜单上显示不同的 pdf 文件这是我的代码

class document extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            folder_name: this.props.params.folder_name,
            pdf_src : ''
        }

    }


    menuClick(menu_name){

        var src ='';
        if(menu_name == 'Product'){
            src =  "assets/file/Product.pdf";
        }else if(menu_name =='leadership'){
            src = "assets/file/Leadership.pdf";
        }else if(menu_name =='motivation'){
            src = "assets/file/Motivation.pdf";
        }
        this.setState({
            folder_name : menu_name,
            pdf_src : src
        })

    }

    render(){
        console.log(this.state.pdf_src);
        let choosen_menu = this.state.folder_name || '';
        let pdf = this.state.pdf_src || '';
        let list_menu = [];
        switch(choosen_menu){
            case 'product' :
                titleMenu = 'Product';
                list_menu.push(<iframe src ={pdf} width='90%' height="800px" allowfullscreen></iframe>);
                break;
            case 'leadership' :
                titleMenu = 'Leadership';
                list_menu.push(<iframe src ={pdf} width='90%' height="800px" allowfullscreen></iframe>);
                break;
            case 'motivation' :
                titleMenu = 'Motivation';
                list_menu.push(<iframe src ={pdf} width='90%' height="800px" allowfullscreen></iframe>);
                break;
            default :
                list_menu.push(
                    <label> not found</label>               
                );
                break;
        }


        return (
            <div className="panel-body boxShadow">
                <div className="row loadresult">
                    <div className="col-xs-12">     
                        {list_menu}
                    </div>
                </div>
            </div>      
        );
    }
}

我尝试显示 pdf_src 的状态，结果是当我单击菜单时，控制台显示的状态发生了变化，但 iframe 仍然显示第一次打开的 pdf

有人可以帮我解决这个问题，为什么状态改变时 iframe 不会改变。

任何帮助将不胜感激谢谢:)

标签： javascriptreactjs

解决方案

最后我找到了答案，如果你想在同一个组件中重新渲染 iframe，你必须为每个 pdf 文件添加不同的键，在我的情况下，我使用 src 作为键

<iframe key ={pdf} src ={pdf} width='90%' height="800px" allowfullscreen></iframe>

我认为当关键改变时，iframe 将被重新渲染。谢谢

推荐阅读