Javascript 如何在React组件中获取DOM元素？

我正在渲染多个相同组件，每个组件都有自己的工具提示。我是否可以编写只在每个组件的HTML中查看的代码，这样就不会影响具有相同类名的所有其他工具提示？我正在使用无状态组件。代码如下：

选项组件.js:

import React from 'react';

const OptionsComponent = () => {
  const toggleTooltip = event => {
    document.getElementsByClassName('listings-table-options-tooltip').classList.toggle('tooltip-hide');
    event.stopPropagation();
  };
  return (
    <div className="inline-block">
        <span onClick={toggleTooltip} className="icon icon-options listings-table-options-icon"> </span>
        <div className="tooltip listings-table-options-tooltip">
            Tooltip content
        </div>
    </div>
  );
};

从“React”导入React；
常量选项组件=（）=>{
const-toggleTooltip=事件=>{
document.getElementsByClassName（'listings-table-options-tooltip'）.classList.toggle（'tooltip-hide'）；
event.stopPropagation（）；
};
返回(
工具提示内容
);
};

Backbone.js有类似这样的功能，允许您在view元素（类似于React组件）中确定文档查询的范围

从React docs稍作修改：

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    var underlyingDOMNode = this.textInput; // This is your DOM element
    underlyingDOMNode.focus();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in this.textInput.
    return (
      <div>
        <input
          type="text"
          ref={(input) => this.textInput = input} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

类CustomTextInput扩展React.Component{
建造师（道具）{
超级（道具）；
this.focus=this.focus.bind（this）；
}
焦点（）{
var underlyngdomnode=this.textInput；//这是您的DOM元素
focus（）；
}
render（）{
//使用'ref'回调存储对文本输入DOM的引用
//元素，该元素位于this.textInput中。
返回(
this.textInput=input}/>
);
}
}

一个合适的方法是通过以下方式修改您的toggleTooltip方法：

...
  const toggleTooltip = event => {
      event.target.parentNode.querySelector('.tooltip').classList.toggle('tooltip-hide');
  };
...

---

但是，我建议使用状态来表示工具提示是否显示。

使用React，您不想修改DOM。只要在发生某些事情时使用新状态重新渲染组件即可。在您的例子中，由于希望

选项组件

跟踪自己的工具提示状态，因此它实际上甚至不是无状态的。它是有状态的，所以将其作为一个组件

它看起来像这样：

class OptionsComponent extends React.Component {
  state = {
      hide: false
  };

  toggleTooltip = (ev) => this.setState({ hide: !this.state.hide });

  render() {
      const ttShowHide = this.state.hide ? "tooltip-hide" : "";
      const ttClass = `tooltip listings-table-options-tooltip ${ttShowHide}`;
      return (
        <div className="inline-block">
            <span onClick={this.toggleTooltip} className="icon icon-options listings-table-options-icon"> </span>
            <div className={ttClass}>
                Tooltip content
            </div>
        </div>
      );

      // Alternatively, instead of toggling the tooltip show/hide, just don't render it!
      return (
        <div className="inline-block">
            <span onClick={this.toggleTooltip} className="icon icon-options listings-table-options-icon"> </span>
            {/* do not render the tooltip if hide is true */}
            {!this.state.hide && 
                <div className="tooltip listings-table-options-tooltip">
                    Tooltip content
                </div>
            }
        </div>
      );
  }
}

类选项组件扩展React.Component{
状态={
隐藏：假
};
toggleTooltip=（ev）=>this.setState（{hide:！this.state.hide}）；
render（）{
const ttShowHide=this.state.hide？“工具提示隐藏”：“；
const ttClass=`工具提示列表表选项工具提示${ttShowHide}`；
返回(
工具提示内容
);
//或者，与其切换工具提示“显示/隐藏”，只需不渲染它即可！
返回(
{/*如果hide为true，则不呈现工具提示*/}
{！this.state.hide&&
工具提示内容
}
);
}
}

使用，您可以做类似的事情：

import React, { Component } from 'react';
import { Layer, LayerContext } from 'react-layer-stack';
import FixedLayer from './demo/components/FixedLayer';

class Demo extends Component {
  render() {
    return (
      <div>
        <Layer id="lightbox2">{ (_, content) =>
          <FixedLayer style={ { marginRight: '15px', marginBottom: '15px' } }>
            { content }
          </FixedLayer>
        }</Layer>

        <LayerContext id="lightbox2">{({ showMe, hideMe }) => (
            <button onMouseLeave={ hideMe } onMouseMove={ ({ pageX, pageY }) => {
              showMe(
                <div style={{
                      left: pageX, top: pageY + 20, position: "absolute",
                      padding: '10px',
                      background: 'rgba(0,0,0,0.7)', color: '#fff', borderRadius: '5px',
                      boxShadow: '0px 0px 50px 0px rgba(0,0,0,0.60)'}}>
                   “There has to be message triage. If you say three things, you don’t say anything.”
                </div>)
            }}>Yet another button. Move your pointer to it.</button> )}
          </LayerContext>
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“反应层堆栈”导入{Layer，LayerContext}；
从“/demo/components/FixedLayer”导入FixedLayer；
类Demo扩展了组件{
render（）{
返回(
{（{，内容）=>
{content}
}
{（{showMe，hideMe}）=>(
{
秀给我看(
“必须进行信息分类。如果你说了三件事，你什么也不说。”
)
}}>还有一个按钮。将指针移到它。）}
)
}
}