Reagieren Komponente funktioniert nicht

Question

Ich habe ein Problem. Also, ich mache eine Reaktionskomponente und brauche einen Tooltip mit Knopf. Tooltip funktioniert, aber ich kann es nicht platzieren wo ich will (ich meine in der Mitte des Buttons und darüber).

Wenn ich tröstete log, dass es zeigt, dass e.target.offsetLeft und e.target.offsetTop 0 sind, aber ich gab es Marge von beiden Seiten.

Aber eigentlich, wenn ich diesen Code platzieren, die Tooltip zu platzieren, dann wird ganz Tooltip nicht angezeigt:

tooltip.style.left = options.x + (options.w/2) - (tooltip.offsetWidth/2) + "px"; 
tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px"; 

Und es ist mein ganzer Code:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Style from 'style-it'; 
var Ink = require('react-ink'); 
import FontIcon from '../FontIcon/FontIcon'; 

var IconButton = React.createClass({ 

getInitialState() { 
    return { 
     iconStyle: "", 
     style: "", 
     cursorPos: {}, 
    }; 
}, 

render() { 

var _props = this.props, 

... 

    globalTooltip = null, 

... 

function createTooltip(options) { 
    var tooltip = document.createElement("div"); 

    tooltip.className = "tooltip"; 
    tooltip.appendChild(document.createTextNode(_props.tooltip)); 
    document.body.appendChild(tooltip); 

    tooltip.style.left = options.x + (options.w/2) - (tooltip.offsetWidth/2) + "px"; 
    tooltip.style.top = (options.y - tooltip.offsetHeight - 10) + "px"; 

    globalTooltip = tooltip; 

    console.log(options); 

}; 

function showTooltip(e){ 

    var options = { 
    w: e.target.offsetWidth, 
    x: e.target.offsetLeft, 
    y: e.target.offsetTop, 
    }; 


    createTooltip(options); 

}; 

function removeTooltip(e){ 
    globalTooltip.parentNode.removeChild(globalTooltip); 
}; 

    return(
... 
    ); 

    }}); 

ReactDOM.render(
<IconButton ... tooltip="aaaaa" />, document.getElementById('app') 
); 

Und in diesem Moment kann ich 't console log das options Objekt:/

Answer 1

Dies ist keine Fehlerbehebung für den Fehler in Ihrem Code, aber ich skizziere einige React Prinzipien und Funktionen, die Ihnen helfen, Ihre Probleme mit Witz zu lösen h Reagieren Sie einfach (anstatt native DOM APIs und React APIs zu mischen).

Es wird nicht empfohlen, direkt auf die DOM-Elemente mit nativen DOM-APIs zuzugreifen, wenn Sie React verwenden. Die Handhabung von DOM ist die Aufgabe von React. Dafür ist React zuständig. Wenn Sie Elemente aus/in Elemente ändern/entfernen/einfügen, die mit React erstellt wurden, verlieren Sie den gesamten Vorteil dieser leistungsstarken Bibliothek. minimaler DOM-Wechsel.

In einfachen Worten, wenn wir die DOM-Elemente durch Reagieren erstellt ändern, und wenn Reagieren zurück kommt und schaut wieder auf das DOM für seinen diffing-Algorithmus ist es jetzt etwas anderes, jemand hat es verändert, ohne Wissen des Reagierens; und React wird verwirrt. So React fails tun seine Optimierungsmagie für das, wofür es berühmt ist.

Um DOM-Knoten zu behandeln, verfügt React über eine Funktion namens Refs, die im Wesentlichen Verweise auf ursprüngliche DOM-Knoten sind. Aber Sie müssen es definieren, wenn Sie es verwenden möchten.

Beispiel für die Verwendung von ref:

class AutoFocusTextInput extends React.Component { 
    componentDidMount() { 
    this.textInput.focus(); 
    } 

    render() { 
    return (
     <input ref={(input) => { this.textInput = input; }} /> 
    ); 
    } 
} 

In dem obigen Beispiel, wenn Sie wollen, dass die offsetWidth, offsetHeight oder andere DOM Eigenschaften von <input> Element, können Sie es durch this.textInput.offsetWidth zugreifen können, this.textInput.offsetHeight etc. Aber sie behandeln als schreibgeschützt

Wenn Sie die Stile ändern wollen: ein style Attribut auf das Element in Ihrem JSX hinzufügen und das Inline-Styles mit React State and Lifecycle methods ändern.

<input 
    style={{ left: this.state.offsetTop, top: this.state.offsetTop }} 
    ref={(input) => { this.textInput = input; }} 
/> 

Ich sah auch in Ihrem Code, den Sie .removeChild und .appendChild, um sich zu verstecken/show Tooltip verwenden. Verwenden Sie stattdessen React's Conditional Rendering.

Beispiel:

render() { 
    return (
     <div> 
      {this.state.showToolTip ? <Tooltip ... /> : null} 

      {/* ... other stuff ... */} 
     </div> 
    );  
} 

Wenn wir reagieren verwenden, dann sollten wir es für einen Zweck nutzen, anstatt nur zu sagen, dass wir es verwenden.