부모의 관점에서 React 구성 요소의 드로잉 코드를 정의하십시오.

Question

동적으로 컨텍스트에 맞게 크기가 조정되는 SVG 선 경로를 그려 보겠습니다. 선은 컨테이너의 왼쪽 상단에서 오른쪽 하단으로 이동합니다. 따라서 컨테이너의 크기가 100x100 인 경우 라인 경로 (d 속성)는 "M0,0 L100,100"이거나 50x150의 경우 "M0,0 L50,150"입니다.

예.

class Line extends Component { 
    render() { 
     const { x1, x2, y1, y2 } = ??? 
     return <svg><line d={`L${x1},${y1} M${x2}${y2}`} /></svg> 
    } 
} 

캔버스, svg 및 모든 그리기 코드에 동일한 문제가 있습니다. 튜토리얼을 보면 언제나 하드 코딩 된 값을 볼 수 있습니다. 하지만 내 코드가 동적 무엇을 원하는 경우 위와 그래서 다음과 같은 :

<div className="col1"><Line /></div> 
<div className="col2"><Line /></div> 
<div className="col3"><Line /></div> 

라인은 왼쪽 상단하지 오른쪽 하단에 상관없이이 된 div가 될 얼마나 큰 사람, 드로잉 코드에서 확장 할 것 항상 왼쪽 위부터 오른쪽 아래로 그립니다.

Answer 1

JS 없이도이 작업을 수행 할 수 있습니다. 여기에 한 가지 방법이 있습니다. SVG 라인은 div 요소의 경계를 따릅니다.

HTML

.col { 
    width: 200px; 
    height: 100px; 
    position: relative; 
} 
.col svg{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

당신이 정말로 제공하려면 동적으로 값

<div class="col"> 
    <svg viewBox="0 0 100 100" preserveAspectRatio="none"> 
    <path stroke="black" stroke-width="1" d="M0 0 100 100" /> 
    </svg> 
</div> 

CSS는, 당신은 사업부에 대한 반작용 구성 요소를 작성해야합니다. componentDidMount에서 요소의 경계를 계산합니다.

예. Div 구성 요소

componentDidMount(){ 
    const domRect = ReactDOM.findDOMNode(this).getBoundingClientRect(); 
    this.setState({ 
    width: domRect.width, 
    height: domRect.height 
    }) 
} 

그런 다음 Props를 사용하여 Line 구성 요소에 제공 할 수있는 너비와 높이 값이 있습니다.