reagieren-Redux bekommen Breite von Eltern div Komponenten

Question

Dieser Teil der Komponente ist:

import MyComp from '../../lib/MyComp' 

const Data = ({ data }) => (
    <div className="data-box" id="data-box"> 
     <MyComp data={data} /> 
    </div> 
) 

Wie erhalte ich die Breite des data-box div innerhalb MyComp Container?

Answer 1

Sie müssen react refs verwenden.

auf MyComp Klasse:

class MyComp extends React.Component { 

    //All your PropTypes and functions... 

    //New function 
    newFunction() { 
    console.log(this.refs.refName); 
    //This will give you the Data component. There you can call methods to calculate width, or whatever you need to do with that component 
    } 

    //Your render function 
    render() { 
    return <div ...whatever you have... ref="refName"> 
    } 
} 

können Sie überprüfen react documentation

Answer 2

was funktionieren sollte, ist so etwas wie dieses MyComp wie diese

aussehen könnte

render() { 
    return <div ref="node"></div> 
} 

mit this.refs.node erhalten Sie die aktuelle dom element und mit

this.res.node.parentNode 

sollten Sie die parentNode

Answer 3

prüfen diese Arbeits Demo erhalten: JSFiddle:

var Parent = React.createClass({ 
    render: function() { 
    return <div id="parent">Hello Parent<Child></Child></div>; 
    } 
}); 

var Child = React.createClass({ 
    componentDidMount: function() { 
    alert('Parent width: ' + this.refs.child.parentNode.clientWidth); 
    }, 
    render: function() { 
    return <div ref="child">Hello Child</div>; 
    } 
}); 

ref="child" Angabe wird das Element zugänglich von der Komponente selbst, durch this.refs.child machen. Es ist die Instanz des vallina-Knotens. Wenn Sie this.refs.child.parentNode.clientWidth verwenden, wird die Breite des übergeordneten Elements zurückgegeben. Oder verwenden Sie this.refs.child.parentNode.getBoundingClientRect().

Referenz: React refs