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原则和功能，它们将帮助您解决仅使用React的问题（而不是混合本机DOM API和React API）。

当您使用React时，不建议使用本机DOM API直接访问DOM元素。处理DOM是React的工作。这就是React的用途。因此，如果您修改/删除/插入使用React创建的元素中的元素，您将失去该强大库的整体优势; 最小化DOM更改。

简单来说，如果我们修改由React创建的DOM元素，并且当React返回并再次查看DOM以执行其diffing算法时，它现在是别的东西，有人在没有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，{{1}访问它但是把它们视为只读。

如果要更改样式：在JSX中为元素添加this.textInput.offsetHeight属性，并使用React State and Lifecycle methods修改内联样式。

style

我还在您的代码中看到您正在使用<input style={{ left: this.state.offsetTop, top: this.state.offsetTop }} ref={(input) => { this.textInput = input; }} />和.removeChild来隐藏/显示工具提示。而不是使用React's Conditional Rendering。

示例：

.appendChild

如果我们使用React，那么我们应该将它用于某个目的，而不是仅仅说我们正在使用它。

React组件无法正常工作

1 个答案: