Question

我想知道从同一个组件访问我的渲染函数中的DOM元素的最佳做法是什么。请注意，我将在页面上多次渲染此组件。

e.g。

var TodoItem = React.createClass({
    ...
    render:function(){

        function oneSecLater(){
            setTimeout(function(){
            //select the current className? this doesn't work, but it gives you an idea what I want.
            document.getElementsByClassName('name').style.backgroundColor = "red";
                )}, 1000);
        }

        return(
            <div className='name'>{this.oneSecLater}</div>
        )



})

Answer 1

您可以使用ReactDOM.findDOMNode(this)来访问底层DOM节点。但访问DOM节点并像操作一样操作是违反React编程风格的。最好使用状态变量并调用setState方法重新呈现DOM。

Answer 2

这里，不需要使用setTimeout。组件有生命周期方法，在渲染后调用componentDidMount。因此，您可以在方法中获得对div的引用。

var TodoItem = React.createClass({
  ...
  componentDidMount: function () {
     if(this.myDiv) {
        this.myDiv.style.backgroundColor = "red";
     }
  }
  render:function(){
    return(
        <div className='name' ref = {c => this.myDiv = c}></div>
    );
});

Answer 3

您可以使用ref callback访问react中的dom元素，这是React Docs建议遵循的内容

并在componentDidMount生命周期函数中执行此操作，因为在创建DOM之前无法访问引用

var TodoItem = React.createClass({
    ...
    componentDidMount() {
          setTimeout(function(){
               this.myDiv.style.backgroundColor = "red";
          )}, 1000);
    }
    render:function(){

        return(
            <div className='name' ref={(ele) => this.myDiv = ele}></div>
        )

})

<强> DOCS

Answer 4

这是我的解决方案：要获取特定元素的computedCss，您需要首先向elemenet添加ref属性。

enter image description here

render(){
  <div>
    <Row className="chartline2">
      <Col className="gutter-row" span={24}>
        <div className="gutter-box lineChartWrap" id="lineChartWrap" ref="lineChartWrap">
            <LineChart data={lineChartData} options={lineChartOptions} width="100%" height="300"/>
        </div>
      </Col>
    </Row>
  </div>
}

然后，在componentDidUpdate（）函数中，使用window.getComputedStyle（this.refs.lineChartWrap）获取元素的css .XXX enter image description here

＆＃13;

	componentDidUpdate(){
		console.log("-------  get width ---");
		let ele = document.querySelector("#lineCharWrap");
		console.log(this.refs.lineChartWrap);
		console.log(window.getComputedStyle(this.refs.lineChartWrap).width);
	}

＆＃13;

Answer 5

您应该避免访问DOM元素，因为反应的重点是将抽象放在dom之上。 React将DOM的表示形式保留在内存中，称为VirtualDom。使用VirtualDom可以简化应用程序的单元测试。如果您真的知道自己在做什么，请按以下步骤操作：

componentDidMount(){
const name=this.name.current.style() //current will return the actual DOM 
element
}
name=React.createRef()  //create a ref object

<div ref={this.name} className="anything" /> //your classname does not need to be named as "name". You access the element via the "ref" attribute not the classname.

在ComponentDidMount中，安装了组件后，将应用其样式更改。

Answer 6

在使用React 14打开条带检出模式之前，尝试进行表单验证之后就遇到了这个问题。

我想指出，您实际上并没有使用引用访问DOM元素。您只是在访问React Component对象。如图所示：

String.startsWith()

顶部显示的是ref.ticketForm，底部显示的是document.getElementById('ticketform')。

我需要这样做的原因如下：

<Button color="success" size="lg" type="button" onClick={(e) => {
  const ticketForm = document.getElementById('ticketForm');
  const isValid = ticketForm.reportValidity();
  if (!isValid) e.stopPropagation();
}}>Buy Tickets</Button>

reportValidity()是DOM元素方法：

参考此问题，此人表明此方法正在参考对象上使用，这自然是不正确的：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity

希望这可以清除DOM元素不显式等于React组件。如果您需要以任何方式操作DOM，请首先以一种反应方式进行操作。在这种情况下，我宁愿依靠表单验证来进行动态表单，而不是手动进行非常繁琐的自定义验证。

Answer 7

componentDidMount(){
    document.querySelector("#myElem").innerHTML = "Boom!";
}

React，如何从同一个组件访问我的渲染函数中的DOM元素

7 个答案: