Question

我有一个div标签，仅当renderCard（）样式溢出为滚动时，才想渲染。我已经尝试过renderCard（）。style.overflow，似乎没有针对这个

编辑：renderCard已添加

  const SearchCard = () => (
    <button class="invisible-button" onClick={onSearchCardClick}>
      //
    </button>
  );

  const AnswerCard = () => (
    <div className="results-set">
      //
    </div>
  );

  const renderCard = () => {
    if (card && card.answer) {
      return AnswerCard();
    } else if (card) {
      return SearchCard();
    }
    return null;
  };

    <React.Fragment>
      <div id="search-results">{renderCard()}</div>
      {renderFollowup ? null : (
        <React.Fragment>
          <div id="search-footer">
            {
              (renderCard().style.overflow = "scroll" ? (
                <div className="scroll-button">
                  <a href="#bottomSection">
                    <img src="images/arrow_down.svg" alt="scroll to bottom" />
                  </a>
                </div>
              ) : null)
            }
          </div>
        </React.Fragment>
      )}
    </React.Fragment>
  );
};

Answer 1

为此，您需要将ref所呈现的实际DOM元素使用renderCard()。

renderCard()在这里返回一个React元素，该元素上没有style属性或任何其他DOM属性-这只是一次DOM元素最终呈现后的React表示-因此，您需要获取通过ref获得实际的DOM元素，您可以在其中访问此属性和其他属性。

下面的示例代码使用useRef创建引用，该引用将以您需要访问的样式附加到元素上。请注意如何使用useEffect来访问ref的值，因为它仅在存在DOM元素时在第一次渲染之后可用。

const Example = () => {
  const ref = React.useRef()
  
  React.useEffect(() => {
    alert('overflow value is: ' + ref.current.style.overflow)
  }, [])
  
  return (
    <div ref={ref} style={{ overflow: 'scroll' }}>hello world</div>
  )
}

ReactDOM.render(<Example />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

将卡片重构为实际的渲染组件，传递ref并附加到元素上

//table/tbody/tr[11]/td[2]/span

在呈现它们的组件中，如果它是功能组件，则使用const SearchCard = ({ overflowRef }) => ( <button ref={overflowRef} class="invisible-button" onClick={onSearchCardClick}> // </button> ); const AnswerCard = ({ overflowRef }) => ( <div ref={overflowRef} className="results-set"> // </div> ); const RenderCard = ({ overflowRef }) => { if (card && card.answer) { return <AnswerCard overflowRef={overflowRef} />; } else if (card) { return <SearchCard overflowRef={overflowRef} />; } return null; };或createRef react钩子来创建引用

useRef

或

const overflowRef = createRef();

将裁判传递到RenderCard，以继续传递

const overflowRef = useRef();

然后像这样检查溢出值

<RenderCard overflowRef={overflowRef} />

Answer 3

使用上述方法，您可能需要重构某些HoC组件，并将函数从父级传递到子级，该函数返回要访问的元素的引用，但我不确定您所在的代码块的范围正在执行三元。

也许更简单的技巧是依靠将useState钩与原始DOM选择器一起使用，并将其传递到甚至更好的方法，只需将其添加到将React.Fragment作为钩包装的无状态函子组件即可：

  const myComponent = () => {
      const [hasScrollOverflow, setHasScrollOverflow] = useState(false);

      React.useEffect(() => {
        const element = document.querySelector(".results-set");
        const elementStyle = element.style;

        if (elementStyle.getPropertyValue('overflow') === 'scroll') {
          setHasScrollOverflow(true);
        }

      }, [])
      return (
        <React.Fragment>
          <div id="search-results">{renderCard()}</div>
          {renderFollowup ? null : (
            <React.Fragment>
              <div id="search-footer">
                {hasScrollOverflow ? (
                  <div className="scroll-button">
                    <a href="#bottomSection">
                      <img src="images/arrow_down.svg" alt="scroll to bottom" />
                    </a>
                  </div>
                ) : null}
              </div>
            </React.Fragment>
          )}
        </React.Fragment>
      );
    };

如何在React JS中访问组件样式

3 个答案: