Question

我是新来的反应者，我想在我的应用程序的每个菜单上显示不同的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不会改变。

任何帮助，谢谢您：）

Answer 1

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

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

我认为，更改键后，将重新渲染iframe。谢谢

ReactJs的状态正在改变，但iframe却没有改变

1 个答案: