ReactJ 렌더링된 컴포넌트

ReactJ 렌더링된 컴포넌트

https://github.com/kumailht/gridforms,의 React 버전을 통합 또는 작성하려고 합니다.따라서 행 내부의 컬럼 높이를 정규화할 필요가 있습니다.원본은 그리드 행의 높이를 가져와서 하위 열에 적용합니다.

저는 줄의 높이를 측정해서 아이의 소유지에 지도를 만들 계획이었지만, 제 시도를 통해 이것이 이상적인 방법이나 심지어 가능하지 않을 수도 있다고 생각합니다.

아래가 저의 현재 코드입니다.

GridRow = React.createClass({
  render(){
        const children = _.map(this.props.children, child => {
            child.props.height = // somehow get row component height
            return child
        })
    return (<div data-row-span={this.props.span} {...this.props}>
      {children}
    </div>)
  }
})

GridCol = React.createClass({
  render(){
    return (<div data-field-span={this.props.span} style={{height:this.props.height}} {...this.props}>
      {this.props.children}
    </div>)
  }
})

스타일을 이렇게 설정해 봤더니 잘 될 것 같은데 높이가 안 맞네요.

편집: 바이올린:

https://jsfiddle.net/4wm5bffn/2/

답변이 조금 늦었지만 기술적으로 다음과 같은 방법으로 요소를 얻을 수 있습니다.

var node = ReactDOM.findDOMNode(this.refs[ref-name]);
if (node){
  var calculatedHeight = node.clientHeight;
}

현재 React 문서에 따르면 refs는 이.refs의 다른 곳에서 액세스하는 문자열이 아닌 콜백으로 전달하는 것이 좋습니다.즉, div의 높이(반응 내)를 구합니다.컴포넌트 클래스):

componentDidMount() {
  this.setState({ elementHeight: this.divRef.clientHeight });
}

render() {
  return <div ref={element => this.divRef = element}></div>
}

또는 이렇게 동작합니다만, 렌더링 방식에서 상태를 설정했기 때문에 이것이 권장되는지는 모르겠습니다.

getHeight(element) {
  if (element && !this.state.elementHeight) { // need to check that we haven't already set the height or we'll create an infinite render loop
    this.setState({ elementHeight: element.clientHeight });
  }
}

render() {
  return <div ref={this.getHeight}></div>;
}

참고 자료: https://facebook.github.io/react/docs/more-about-refs.html

다른 사람은 모르지만 정확한 높이와 폭을 얻기 위해 항상 다음 똑딱이를 맞춰야 해요.진부한 느낌이 들지만 렌더링 사이클과 관련이 있는 것 같지만 일단은 받아들이겠습니다.onLayout은 특정 사용 사례에서 더 잘 작동할 수 있습니다.

componentDidMount() {
  setTimeout(() => {
    let ref = this.refs.Container
    console.log(ref.clientHeight)
    console.log(ref.clientWidth)
  }, 1)
}

사용 가 있습니다.refs ★★★★★★★★★★★★★★★★★」clientWidth/clientHeight

import React, { Component } from 'react';
import MyImageSrc from './../some-random-image.jpg'

class MyRandomImage extends Component {
  componentDidMount(){
    let { clientHeight, clientWidth } = this.refs.myImgContainer;
    console.log(clientHeight, clientWidth);
  }
  render() {
    return (
      <div ref="myImgContainer">
        <img src={MyImageSrc} alt="MyClickable" />
      </div>
    );
  }
}

export default MyRandomImage;

주의: 이 방법은 다음 기간 동안 유효합니다.width할 수 있지만 할 수 있는 것은 확실하다height...

제 개인적인 의견으로는, 이러한 정적 사이즈와 측정 사이즈는 불필요하게 복잡해질 수 있기 때문에 피할 수 있으면 피하는 것이 좋습니다.하지만 가끔은 피할 수 없을 때도 있어요.컴포넌트를 마운트해야 사이즈를 얻을 수 있습니다.

일반적인 접근법:

• 요소를 참조합니다.
• 호출합니다..clientHeight "/"/".clientWidth
• 주(州)에 가치를 두거나 소품으로 패스를 합니다.
• 상태 변수에서 크기가 필요한 요소 렌더링

열 크기를 가져오려면 다음과 같은 작업을 수행할 수 있습니다.

GridRow = React.createClass({
  render(){
        const children = _.map(this.props.children, child => {
            child.props.height = // somehow get row component height
            return child
        })

    return (<div data-row-span={this.props.span} {...this.props}>
      <GridCol onSizeChange={(size) => {

         //Set it to state or whatever
         console.log("sizeOfCol", size);
      }} />
    </div>)
  }
})

GridCol = React.createClass({

  componentDidMount(){

    //Set stizes to the local state
    this.setState({
       colH: this.col.clientHeight,
       colW: this.col.clientWidth
    }); 

    //Use a callback on the props to give parent the data
    this.props.onSizeChange({colH: this.col.clientHeight, colW: this.col.clientWidth})

  }

  render(){
    //Here you save a ref (col) on the class
    return (<div ref={(col) => {this.col = col}} data-field-span={this.props.span} style={{height:this.props.height}} {...this.props}>
      <.... >
    </div>)
  }
})

이 답변에 따라 구성 요소의 크기는 내부 폭 또는 높이가 0인 것으로 판명될 수 있습니다.componentDidMount이벤트 핸들러그래서 나는 그것을 해결할 방법을 찾고 있다.

1. 최상위 React 구성 요소에서 이벤트를 처리하고 그곳에서 크기를 다시 계산하거나 특정 하위 구성 요소를 다시 그립니다.

2. 로드가벤트핸들러를 설정합니다.componentDidMount적절한 크기를 재계산하기 위해 반응 구성요소로 셀을 로드하는 작업을 처리합니다.

   componentDidMount = () => {
      this.$carousel = $(this.carousel)
      window.addEventListener('load', this.componentLoaded)
   }
   

   그리고 나서componentLoaded방법은 당신이 해야 할 일을 하세요.

조금 늦었지만 getElementById 메서드를 사용하지 않고 사용할 수 있는 방법이 있습니다.클래스 기반 컴포넌트를 생성하여 샘플코드를 사용할 수 있습니다.

constructor(props) {
  super(props);
  this.imageRef = React.createRef();
}

componentDidMount(){
  this.imageRef.current.addEventListener("load", this.setSpans);
}

setSpans = () => {
  //Here you get your image's height
  console.log(this.imageRef.current.clientHeight);
};

render() {
  const { description, urls } = this.props.image;
  return (
    <div>
     <img ref={this.imageRef} alt={description} src={urls.regular} />
    </div>
  );
}

위의 솔루션이 좋습니다.이 문제를 해결하는 데 도움이 되는 내 자신의 것과 이 질문에서 논의된 다른 것들을 추가하려고 했습니다.

다른 사람들이 말했듯이 타임아웃 함수는 예측 불가능하며 javascript 변수 의존성을 가진 인라인 css입니다(예:style={{height: `calc(100vh - ${this.props.navHeight}px)`}})는 다음 요소의 높이를 변경할 수 있습니다.componentDidMountmethod는 모든 요소와 인라인 javascript-discript css가 실행된 후에 업데이트가 있어야 합니다.

어떤 요소가 이 기능을 사용할 수 있는지에 대한 좋은 정보를 찾을 수 없었습니다.onLoadimg 요소가 알고 있습니다.리액션 컴포넌트 하단에 숨겨진 이미지 요소를 로드하기만 하면 됩니다.올바른 결과를 얻기 위해 다른 곳에서 참조된 컴포넌트의 높이를 업데이트하기 위해 onLoad를 사용했습니다.이게 다른 사람에게 도움이 됐으면 좋겠어요.

_setsectionheights = () => {
    this.setState({
      sectionHeights: [
        this.first.clientHeight,
        this.second.clientHeight,
        this.third.clientHeight,
      ]
    });
}

render() {
    return (
        <>
            <section
            ref={ (elem) => { this.first = elem } }
            style={{height: `calc(100vh - ${this.props.navHeight}px)`}}
            >
                ...
            </section>
            ...
            <img style={{display: "none"}} src={..} onLoad={this._setsectionheights}/>
        </>
    );
}

철저하게 하기 위해서, 문제는 그 일이 일어날 때componentDidMount메서드가 실행되고 외부 css만 고려됩니다(여기서 추측).따라서 my section elements(최소 높이: 외부 css에서 400px로 설정)는 각각에 대해 참조했을 때 400을 반환했습니다.clientHeight값. img는 로드되기 전에 모든 것이 로드되면 해당 상태의 섹션 높이를 업데이트합니다.

componentDidUpdate로 하고 싶지만 무한 루프를 방지하기 위해 조건이 충족되는지 확인함으로써 다음을 수행합니다.

  componentDidUpdate(prevProps, prevState) {
    const row = document.getElementById('yourId');
    const height = row.clientHeight;
    
    if (this.state.height !== height) {
      this.setState({ height });
    }
  }

언급URL : https://stackoverflow.com/questions/31661790/reactjs-get-rendered-component-height