React组件不起作用

Question

我遇到问题。所以，我正在制作反应组件，并且我需要使用按钮的工具提示。工具提示正在工作，但我无法将它放在我想要的位置（我的意思是位于按钮的中心位置）。

当我安慰日志，它显示了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') 
); 

而在这一刻，我可以甚至没有控制台登录选项对象：/

Answer 1

这不是修复您的代码中的错误，但我概述了一些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> 
    );  
} 

如果我们使用的反应，那么我们就应该使用它的目的，而不是仅仅说我们正在使用它。