Question

目前正在Reactjs中构建一个网络应用程序。

我在Render（）中有以下组件：

                <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>
                    <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>

我想实现togglePreview操作，以便在每次点击时显示或隐藏特定元素的iframe。我怎么能这样做？我尝试使用React.findDOMNode（this.refs [article.title]）但收到以下警告：

Warning: Article is accessing getDOMNode or findDOMNode inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.

我如何继续实施这样的逻辑？

Answer 1

抱怨因为self.togglePreview(article.title)正在渲染功能中执行。您是否打算使用.bind来对article.title进行回调？如下：

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

Answer 2

我可能错了，但我认为您需要单独收听onClick事件，在其中执行逻辑并在其中设置state以获取iframe对象的可见性。然后使用state来显示或隐藏iframe。

像这样（在ES6语法中）：

...
constructor {
  this.state.isIFrameDisplayed = false;
  this.articles = [{ title: ..., uri: ... }, { title: ..., uri: ... }];
  this.state.currentArticleTitle = '';
  this.state.isIFrameDisplayed = false;
}
componentDidMount() {
  this.setState({
    currentArticleTitle: this.articles[0].title,
    isIFrameDisplayed: true
  });
}
onClickIFrame() {
  if (this.state.currentArticleTitle === this.state.articles[0].title) {
    this.setState({ isIFrameDisplayed: false });
  } else {
    this.setState({ isIFrameDisplayed: true });
  }
}
render() {
  var iFrame = this.state.isIFrameDisplayed ? <iframe ref={article.title} id={article.title} className={'doc-preview-block hidden '+ article.title} src={article.uri} width='400' height='300' onClick={this.onClickIFrame} allowfullscreen webkitallowfullscreen></iframe> : '';
  return (
    ...
    {iFrame}
    ...
  );
}
...

希望这有帮助。

Answer 3

这是一种简单的方法。

                    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>
                                )
                            }

请注意，无论是否显示，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>
                                )
                            }

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>
                                )
                            }

如何切换show / hide for div in react

3 个答案: