0
so dass im Grunde ref Ich bin mit Bauteilabmessungen in componentDidMount() zu bekommen, und ich kann lesen und console.log dass es mir die Breite gibt I (schauen Sie in Code) will, aber wenn ich lesen möchte und console.log das in der render() Methode und diese Informationen zu verwenden, gibt es mir undefined. Und ich weiß nicht, was falsch istReactjs, das Senden und Lesen von Variablen
var Tooltip = React.createClass({
componentDidMount() {
this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
this.tooltipWidth = this.tooltipSize.width;
// console.log(this.tooltipWidth); here it gives me the width
},
render(){
var tooltipSize,
tooltipWidth,
tooltipStyle = {
top: 0,
left: 0,
};
// console.log(tooltipWidth); here it gives me undefined
return(
<div ref="tooltip" className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div>
);
}
});
var Button = React.createClass({
getInitialState() {
return {
iconStyle: this.props.iconStyle,
\t style: this.props.style,
cursorPos: {},
};
},
componentDidMount() {
this.size = this.refs.button.getBoundingClientRect();
\t this.width = this.size.width;
this.height = this.size.height;
this.top = this.size.top;
\t this.left = this.size.left;
},
...
render() {
var _props = this.props,
top,
left,
width,
height,
size,
//other variables
...
\t return(
<Style>
{`
.IconButton{
position: relative;
}
.IconButton:disabled{
color: ${_props.disabledColor};
}
.btnhref{
text-decoration: none;
background-color: blue;
}
`}
<a {...opts} className="btnhref" id="tak">
\t <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
\t onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
\t <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
\t <FontIcon className={_props.iconClassName}/>
\t </button>
</a>
</Style>
\t \t);
}
});
class IconButton extends React.Component {
render(){
return(
<div>
<Tooltip tooltip={this.props.tooltip} />
<Button href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName} disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} />
</div>
);
}
}und eine Sache anders. Wie kann ich Variablen mit Informationen über Abmessungen einer anderen Komponente (Button-Komponente) an die Tooltip-Komponente senden? Weil ich sie innerhalb dieser Komponente verwenden muss, um sie zu platzieren. Dank
Aktualisiert Code:
var Tooltip = React.createClass({
getInitialState() {
return {
tooltipWidth: null,
tooltipHeight: null
};
},
componentDidMount() {
this.tooltipSize = this.refs.tooltip.getBoundingClientRect();
this.setState({
tooltipWidth: this.tooltipSize.width,
tooltipHeight: this.tooltipSize.height
});
},
...
render(){
var _props = this.props,
fontSize,
fontStyle,
tooltipSize,
tooltipWidth = this.state.tooltipWidth,
tooltipHeight = this.state.tooltipHeight,
w = this.props.buttonWidth,
h = this.props.buttonHeight,
y = this.props.buttonTop,
x = this.props.buttonLeft,
tooltipStyle = {
top: y - tooltipHeight - 20 + "px",
left: x - tooltipWidth/2 + w/2 + "px",
};;
...
return(
<div ref="tooltip" className="tooltip" style={fontStyle}>{this.props.tooltip}</div>
);
}
});
var Button = React.createClass({
getInitialState() {
return {
iconStyle: this.props.iconStyle,
\t style: this.props.style,
cursorPos: {},
width: null,
height: null,
top: null,
left: null,
};
},
componentDidMount() {
this.size = this.refs.button.getBoundingClientRect();
this.width = this.size.width;
this.height = this.size.height;
this.top = this.size.top;
this.left = this.size.left;
},
transferring1(){
var width = this.width;
return width;
},
transferring2(){
var height = this.height;
return height;
},
transferring3(){
var top = this.top;
return top;
},
transferring4(){
var left = this.left;
return left;
},
...
render() {
var _props = this.props,
\t opts,
top,
left,
\t width,
\t height,
\t size;
...
\t return(
<Style>
{`
.IconButton{
position: relative;
}
.IconButton:disabled{
color: ${_props.disabledColor};
}
.btnhref{
text-decoration: none;
background-color: blue;
}
`}
<a {...opts} className="btnhref" id="tak">
\t <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
\t onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
\t <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
\t <FontIcon className={_props.iconClassName}/>
\t </button>
</a>
</Style>
\t \t);
}
});
class IconButton extends React.Component {
constructor(props) {
super(props);
this.state = {
buttonWidth: null,
buttonHeight: null,
buttonTop: null,
buttonLeft: null,
};
}
componentDidMount() {
this.setState({
buttonWidth: this.refs.btn.transferring1(),
buttonHeight: this.refs.btn.transferring2(),
buttonTop: this.refs.btn.transferring3(),
buttonLeft: this.refs.btn.transferring4(),
});
}
render(){
return(
<div>
<Tooltip tooltipPosition={this.props.tooltipPosition} tooltip={this.props.tooltip} touch={this.props.touch} buttonWidth={this.state.buttonWidth} buttonHeight={this.state.buttonHeight} buttonTop={this.state.buttonTop} buttonLeft={this.state.buttonLeft}/>
<Button ref="btn" href={this.props.href} className={this.props.className} iconStyle={this.props.iconStyle} style={this.props.style} iconClassName={this.props.iconClassName}
disabled={this.props.disabled} disableTouchRipple={this.props.disableTouchRipple} />
</div>
);
}
}
ReactDOM.render(
<IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="! ! ! Guzik ! to ! kozak ! ! !" tooltipPosition="" touch="true" />,
document.getElementById('app')
);
Hallo, danke, aber jetzt bin ich immer diese Fehlermeldung: ** Nicht abgefangene Fehler: ReactClassInterface: Sie versuchen, 'constructor' auf definieren Ihre Komponente mehr als einmal. Dieser Konflikt kann auf eine Mischung zurückzuführen sein. ** – Karol
Hi @Karol ist wahrscheinlich, weil Sie mehr als 1 Konstruktor in Ihrer Komponente haben. Oh, und ich aktualisierte die Antwort zu 'super()' direkt nach dem Konstruktor –
Hallo @kendrickkesley, danke, ich habe eine Lösung vor, aber jetzt habe ich ein Problem. Also im Grunde habe ich eine Funktion in der ** Button ** -Komponente erstellt, die ein Objekt zurückgibt, und nachdem ich diese Funktion in der Elternklasse in 'componentDidMount()' wie folgt aufgerufen habe: 'this.setState ({ buttonDim: this.refs .btn.transferring(), }); 'Und jetzt habe ich diesen Zustand, den ich in die Tooltip-Komponente übergebe, und hier bekomme ich einen Hinweis darauf:' var options = this.props.buttonDim; 'und sein Objekt unter * * Optionen ** und ich kann das loggen. Das gibt mir das richtige Objekt. Fortsetzung folgt (zu lang für einen Kommentar) – Karol