componentDidMount() 안에 ReactJS 요소를 가져 오는 방법은 무엇입니까?

특정 React-class의 인스턴스가 4 개 있습니다. componentDidMount() 후에 각 인스턴스의 y 위치를 저장하려고합니다.componentDidMount() 안에 ReactJS 요소를 가져 오는 방법은 무엇입니까?

어떻게 렌더링 된 요소를 처리 할 수 있습니까? 클래스 네임을 사용할 수 없습니다. 왜냐하면 같은 클래스에 다른 위치에 4 개의 요소가 있기 때문입니다.

내 ReactJS 구성 요소 :

const Col = React.createClass({ 
    componentDidMount: function() { 
     //here address the actual rendered col-instance 
    }, 

    render() { 
     return (
      <div className='col'> 
      </div> 
     ); 
    } 
});

출처

2016-12-30 vuvu

더 많은 질문을 이해하려고합니다. 나중에 사용할 각 React 구성 요소 인스턴스의 y 위치를 저장하려고합니까? 또한 각 요소의 y- 위치는 장착 후에 변경됩니까? – HussienK

저장해야합니다. 변경되지 않습니다. 아마도 this.ref를 사용할 수 있을까요? – vuvu

조금 더 설명해 주시겠습니까? 무엇을 저장하고 싶습니까? 저장된 값과 어디에서 어떻게 액세스하고 싶습니까? –

사용 refs.

먼저 각 JSX cols 요소에 ref 속성을 연결하십시오. 그런 다음 componentDidMount 메서드 내에서이 ref을 사용하여 구성 요소의 DOM 노드 (실제 HTMLElement)에 액세스합니다. 마지막으로 요소의 위치/오프셋 또는 필요한 항목을 가져옵니다.

const Col = React.createClass({ 
    componentDidMount: function() { 
     // this.refs.col1 is the actual DOM element, 
     // so you can access it's position/offset or whatever 
     const offsetTop = this.refs.col1.offsetTop; 
    }, 

    render() { 
     return (
      <div className="col" ref="col1"> 
      </div> 
     ); 
    } 
});

추신 : y 위치를 말하는 것이 무슨 뜻인지 모르겠습니다. 어쨌든 DOM 요소 (this.refs.col1)를 얻는 방법을 알고 나면 javascript to retrieve the position을 사용할 수 있습니다.

출처

2016-12-30 21:28:21

React.js의 구 API 용으로 좋은 솔루션이었습니다. https://reactjs.org/docs/refs-and-the-dom.html에서 : "문자열 참조에 문제가 있고 레거시로 간주되어 향후 릴리스에서 제거 될 가능성이 있기 때문에 반대하는 것이 좋습니다. "새로운 API를 사용하면 솔루션 : https://stackoverflow.com/questions/42242146/react-how-to-access-the-dom-element-in-my-render-function-from-the-same-compone – favero

componentDidMount() 안에 ReactJS 요소를 가져 오는 방법은 무엇입니까?

답변

관련 문제