Javascript 如何在react中切换div的显示/隐藏

当前正在Reactjs中构建web应用程序

Render（）中有以下组件：

---

如何继续实现这样的逻辑？

它在抱怨，因为在渲染函数中正在执行

self.togglePreview（article.title）

。您是否打算使用

.bind

将

文章。title

插入回调？在这方面：

onClick={self.togglePreview.bind(article.title)}

---

这是因为在渲染函数中执行了

self.togglePreview（article.title）

。您是否打算使用

.bind

将

文章。title

插入回调？在这方面：

onClick={self.togglePreview.bind(article.title)}

---

我可能是错的，但我认为您需要单独聆听

onClick

事件，在其中执行逻辑，并在其中设置

状态

，以便查看

iframe

对象。然后使用该

状态

显示或隐藏该

iframe

类似这样的内容（在ES6语法中）：

。。。
建造师{
this.state.isiframedisplated=false；
this.articles=[{title:…，uri:…}，{title:…，uri:…}]；
this.state.currentArticleTitle=''；
this.state.isiframedisplated=false；
}
componentDidMount（）{
这是我的国家({
currentArticleTitle:this.articles[0]。标题，
显示的参数：true
});
}
onClickIFrame（）{
if（this.state.currentArticleTitle==this.state.articles[0].title）{
this.setState（{isiframedisplated:false}）；
}否则{
this.setState（{isiframedisplated:true}）；
}
}
render（）{
var iFrame=this.state.isiframedisplated？：“”；
返回(
...
{iFrame}
...
);
}
...

---

希望这有帮助。

我可能是错的，但我认为您需要单独聆听

onClick

事件，在其中执行逻辑，并在其中设置

状态，以便查看
iframe
对象。然后使用该
状态
显示或隐藏该
iframe

类似这样的内容（在ES6语法中）：

。。。
建造师{
this.state.isiframedisplated=false；
this.articles=[{title:…，uri:…}，{title:…，uri:…}]；
this.state.currentArticleTitle=''；
this.state.isiframedisplated=false；
}
componentDidMount（）{
这是我的国家({
currentArticleTitle:this.articles[0]。标题，
显示的参数：true
});
}
onClickIFrame（）{
if（this.state.currentArticleTitle==this.state.articles[0].title）{
this.setState（{isiframedisplated:false}）；
}否则{
this.setState（{isiframedisplated:true}）；
}
}
render（）{
var iFrame=this.state.isiframedisplated？：“”；
返回(
...
{iFrame}
...
);
}
...

希望这有帮助。
这是最简单的方法

                    render: function() {
                        var showIframe = conditionShow == true ? {} : {display: 'none'};
                        return (
                                <div className="doc-preview">
                                        <a href="javascript:void(0)" id="" data-title={article.title}
                                             className="dl-docpreview-icon inline-block" data-toggle="modal" data-target={"#"+article.title} >
                                                <i className="pe-7s-search"></i>
                                        </a>
                                        <div style={showIframe}>
                                            <iframe ref={article.title} id={article.title} className={'doc-preview-block hidden '+ article.title} src={article.uri} width='400' height='300' onClick={self.togglePreview(article.title)} allowfullscreen webkitallowfullscreen></iframe>
                                        </div>
                                </div>
                                )
                            }

render:function（）{
var showIframe=conditionShow==true？{}:{display:'none'}；
返回(
)
}

请注意，无论iframe是否显示，它都将进行渲染。如果这对性能有很大影响，您可以使用以下方法

                    render: function() {
                        var hideIframe = conditionShow == true ? false : true;
                        return (
                                <div className="doc-preview">
                                        <a href="javascript:void(0)" id="" data-title={article.title}
                                             className="dl-docpreview-icon inline-block" data-toggle="modal" data-target={"#"+article.title} >
                                                <i className="pe-7s-search"></i>
                                        </a>
                                        <IframeComponent hide={hideIframe} />
                                </div>
                                )
                            }

render:function（）{
var hideIframe=conditionShow==true？false:true；
返回(
)
}

IframeComponent

                    render: function() {
                        if (this.props.hide) return null;
                        return (
                                <iframe ref={article.title} id={article.title} className={'doc-preview-block hidden '+ article.title} src={article.uri} width='400' height='300' onClick={self.togglePreview(article.title)} allowfullscreen webkitallowfullscreen></iframe>
                                )
                            }

render:function（）{
if（this.props.hide）返回null；
返回(
)
}
这是一种简单的方法

                    render: function() {
                        var showIframe = conditionShow == true ? {} : {display: 'none'};
                        return (
                                <div className="doc-preview">
                                        <a href="javascript:void(0)" id="" data-title={article.title}
                                             className="dl-docpreview-icon inline-block" data-toggle="modal" data-target={"#"+article.title} >
                                                <i className="pe-7s-search"></i>
                                        </a>
                                        <div style={showIframe}>
                                            <iframe ref={article.title} id={article.title} className={'doc-preview-block hidden '+ article.title} src={article.uri} width='400' height='300' onClick={self.togglePreview(article.title)} allowfullscreen webkitallowfullscreen></iframe>
                                        </div>
                                </div>
                                )
                            }

render:function（）{
var showIframe=conditionShow==true？{}:{display:'none'}；
返回(
)
}

请注意，无论iframe是否显示，它都将进行渲染。如果这对性能有很大影响，您可以使用以下方法

                    render: function() {
                        var hideIframe = conditionShow == true ? false : true;
                        return (
                                <div className="doc-preview">
                                        <a href="javascript:void(0)" id="" data-title={article.title}
                                             className="dl-docpreview-icon inline-block" data-toggle="modal" data-target={"#"+article.title} >
                                                <i className="pe-7s-search"></i>
                                        </a>
                                        <IframeComponent hide={hideIframe} />
                                </div>
                                )
                            }

render:function（）{
var hideIframe=conditionShow==true？false:true；
返回(
)
}

IframeComponent

                    render: function() {
                        if (this.props.hide) return null;
                        return (
                                <iframe ref={article.title} id={article.title} className={'doc-preview-block hidden '+ article.title} src={article.uri} width='400' height='300' onClick={self.togglePreview(article.title)} allowfullscreen webkitallowfullscreen></iframe>
                                )
                            }

render:function（）{
if（this.props.hide）返回null；
返回(
)
}
您似乎在
render
函数中使用了
React.findDOMNode（…）
。如警告所示，您必须将其移动到
componentDidMount
方法，并在那里更改
状态。基于该
状态
，显示或隐藏
iframe
元素。@TahirAhmed这是我的函数
togglePreview（title）{React.findDOMNode（this.refs[title]）.classList.remove（“hidden”）；}，
我如何将其放入componentDidMount方法中？我明白了。在
componentDidMount
中存储
React.findDOMNode（…）
的引用，例如
componentDidMount（）{this.iFrame=React.fi