親の観点からリアクションコンポーネントの描画コードを定義する

Question

コンテキスト内に動的にスケーリングするSVGラインパスを描画したいとしましょう。コンテナの左上から右下に移動します。したがって、コンテナの寸法が100×100の場合、ラインパス（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

<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

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

あなたが本当に動的に値を提供したい場合は、divの反応コンポーネントを作成する必要があります。 componentDidMountで、要素の境界を計算します。

など。 Divコンポーネント

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

次に、小道具を使用してLineコンポーネントに提供できる幅と高さの値があります。