Реакция компонента не работает

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

И в этот момент я могу 't даже консоль зарегистрировать объект опций:/

Answer 1

Это не исправление ошибки в вашем коде, но я излагаю некоторые принципы и функции React, которые помогут вам решить ваши проблемы h просто React (вместо смешивания собственных DOM API и React API).

Не рекомендуется напрямую обращаться к элементам DOM, используя собственные API DOM, когда вы используете React. Обработка DOM - это работа React. Для этого и нужен Реакт. Поэтому, если вы изменяете/удаляете/вставляете элементы из/в элементы, созданные с помощью React, вы теряете все преимущества этой мощной библиотеки; минимальное изменение DOM.

Простыми словами, если мы модифицируем элементы DOM, созданные React, и когда React возвращается и снова смотрит на DOM для выполнения своего разностного алгоритма, теперь это что-то еще, кто-то изменил его без знания 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 или любые другие свойства DOM <input> элемента, вы можете получить доступ к нему с помощью 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> 
    );  
} 

Если мы используем React, то мы должны использовать его для цели, а не просто сказать, что мы используем его.