Question

我正在处理React JS，我想显示我们所在的div的名称。例如，在下面的代码中，我希望程序显示在页面“ Hello Pooja我们在div消息框中”我已经编写了以下代码，但似乎没有用。

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render ()  {
    return (
      <div id='message-box'>
         Hello {this.props.name} We are in div {this.currentTarget.id}
      </div>
    )
  }
}

Answer 1

我不知道您是否想要这样的结果，但是您可以使用Refs来实现。

function Hello() {
 const [parentDiv, setParentDiv] = useState();
 const ref = useRef();

 useEffect(() => {
   setParentDiv(ref.current.id);
 });

  return (
     <div id='message-box' ref={ref}>
        Hello! We are in div {parentDiv}
     </div>
  )

}

类组件

class Hello extends React.Component {
 state = {
   parentDiv: ""
  };

  ref = React.createRef();

  componentDidMount() {
   this.setState({
     parentDiv: this.ref.current.id
   });
  }

  render() {
     return (
       <div id="message-box" ref={this.ref}>
          Hello! We are in div {this.state.parentDiv}
        </div>
    );
  }
 }

Answer 2

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
hello(id)
{
 return (
      <div >
         Hello {this.props.name} We are in div {id}
      </div>
    )
}
  render ()  {
    return (
      this.hello({id:message-box})
    ) 
  }
}

Answer 3

您可以尝试这样的事情。

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this);
    console.log(node.id);
  }

  render ()  {
    return (
      <div id='message-box'>
         Hello {this.props.name} We are in div {this.currentTarget.id}
      </div>
    )
  }
}

我希望有帮助。

Answer 4

如果您像这样<div id='message-box'>声明div，那么您已经知道ID。我不确定为什么您会需要这种逻辑。

如@mstoJS所述，您可以使用refs。 ref变量（用于dom元素）仅在将组件安装到dom 后设置。

此处的技巧是强制第二次渲染以显示ref的值。

您可以运行以下代码片段以查看结果。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.forceUpdate();
  }

  render() {
    console.log("Rendering");
    return <div id = "message-box"
    ref = {
        this.myRef
      } >
      Hello {
        this.props.name
      }&nbsp;
    We are in div {
        this.myRef.current ? this.myRef.current.id : ""
      } <
      /div>
  }
}

ReactDOM.render( < Hello name = "Pooja" / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

我为什么使用this.myRef.current ? this.myRef.current.id : ""

这是因为ref到dom元素仅在组件安装到dom之后才被分配（比如在浏览器上显示），而render在组件安装到dom之前发生。

您可以运行以下代码段，并通过componentWillMount语句查看render，componentDidMount和console.log的顺序。

您应该能够看到 ref是在render方法之后初始化的（它在componentDidMount中可用，在render之后运行）。

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log("3. Component is mounted on dom. Value of myRef is ", this.myRef.current);
    //this.forceUpdate();
  }

  componentWillMount(){
    console.log("1. Component is about to mount on dom. Value of myRef is ", this.myRef.current);
  }

  render() {
    console.log(
      "2. Component is rendering. Value of myRef is ",
      this.myRef.current
    );
    return (
      <div id="message-box" ref={this.myRef}>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(<Hello />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

this.myRef.current ? this.myRef.current.id : ""确保在第一次渲染时不会访问空对象的属性（显然会引发错误），但可以在第二次渲染时使用（我强制通过{{1} }在this.forceUpdate()中。

如何从React JS中的类div中提取ID，以便我可以在我的代码中将div id的值分配给变量

4 个答案: