React組件不起作用

我遇到問題。所以，我正在製作反應組件，並且我需要使用按鈕的工具提示。工具提示正在工作，但我無法將它放在我想要的位置（我的意思是位於按鈕的中心位置）。React組件不起作用

當我安慰日誌，它顯示了e.target.offsetLeft和e.target.offsetTop是0，但我給它從雙方保證金。

但實際上，當我把這個代碼，必須把提示，則不顯示整個工具提示：

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

它是我整個代碼：

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') 
);

而在這一刻，我可以甚至沒有控制檯登錄選項對象：/

來源

2016-11-30 Karol

你可以使用'display'顯示/隱藏tooltip元素CSS屬性根據組件的道具設置爲'none'或'block'。它甚至會比更新DOM更快。 –

upvoted for @ free-soul的回答，最好用ReactJS的方式來完成。 –

它工作得很好，但我不能把它放在我想要的地方 – Karol

這不是修復您的代碼中的錯誤，但我概述了一些React的原則和功能，這將幫助您解決您的問題機智h只是React（而不是混合本地DOM API和React API）。

當您使用React時，不建議使用本機DOM API直接訪問DOM元素。處理DOM是React的工作。這就是React的作用。因此，如果您修改/刪除/插入使用React創建的元素中的元素，您將失去該強大庫的全部優勢; 最小的DOM變化。簡而言之，如果我們修改由React創建的DOM元素，並且當React返回並再次查看DOM以執行其差異化算法時，它現在是別的了，有人在沒有React的知識的情況下改變了它; React會感到困惑。因此React因其出名的優點而失敗。

要處理DOM節點，React有一個名爲Refs的功能，它實質上是對原始DOM節點的引用。但是如果你想使用它，你需要定義它。

的ref實例：

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

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

在上面的例子，如果要在offsetWidth，offsetHeight或<input>元件的任何其他DOM屬性，可以通過this.textInput.offsetWidth訪問它，this.textInput.offsetHeight等，但把它們作爲只讀。

如果要更改樣式：請將style屬性添加到JSX中的元素，並使用React State and Lifecycle methods修改內聯樣式。

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

我也看到在你的代碼，你爲了隱藏/顯示工具提示使用.removeChild和.appendChild。而不是使用React's Conditional Rendering。

例如：

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

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

如果我們使用的反應，那麼我們就應該使用它的目的，而不是僅僅說我們正在使用它。

來源

2016-11-30 19:50:35

哇，非常感謝，我仍然在學習React並感謝提示，我一定會檢查所有這些並學習。我有目的，但在我之前還有很長一段路要和你一樣好。再一次，非常感謝:) – Karol

React組件不起作用

回答

相關問題