Javascript 是否有任何方法可以在react中定义类似于angular的自定义属性？

考虑用例。我希望在react应用程序中具有工具提示功能。我想要设置它的方式是，当我编写

时，这应该应用工具提示，在文本框上显示“在此处输入您的姓名”。这应该适用于我的应用程序中的任何合格元素。因此，每当我需要在任何元素上应用工具提示时，我只需要在其上编写

tooltip=“…”

属性

我很熟悉，在AngularJS中，你可能会这样做

angular.module('app')
.directive('tooltip', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       // Apply Tooltip through JS or applying right CSS class
    }
  }
}

---

但我不确定React中是否有类似的产品。或者，如果需要构建，我应该如何创建这样的东西。

这个它可能是那样的。。虽然我不建议真的去摆弄DOM

angular.module('app')
.directive('tooltip', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       // Apply Tooltip through JS or applying right CSS class
    }
  }
}

class TooltipProvider extends React.Component {
  componentDidMount() {
    document.querySelectorAll('[tooltip]').forEach(el => {
       // set up a tooltip
    });
  }

  componentDidUpdate() {
    document.querySelectorAll('[tooltip]').forEach(el => {
       // set up a tooltip
    });
  }


  render() {
    return children;
  }

}

// somwhere in your app

return () {
   <TooltipProvider>
      // The rest of the app
   </TooltipProvider>
}

class TooltipProvider扩展了React.Component{
componentDidMount（）{
document.querySelectorAll（“[tooltip]”）。forEach（el=>{
//设置工具提示
});
}
componentDidUpdate（）{
document.querySelectorAll（“[tooltip]”）。forEach（el=>{
//设置工具提示
});
}
render（）{
返回儿童；
}
}
//somwhere在你的应用程序中
返回（）{
//应用程序的其余部分
}

问题基本上是React是否有指令的概念。答案是否定的

React提供了应该组成的组件。与角度组件相反，React组件不一定创建DOM元素，因此嵌套组件不会对布局施加限制

因此，工具提示应定义为组件：

class Tooltip extends React.Component {
  render() {
    const child = React.Children.only(this.props.children);

    return React.cloneElement(
      child,
      { className: classNames(child.props.className, 'tooltip') }
    );
  }

  componentDidMount() {
    const childElement = ReactDOM.findDOMNode(this).children[0];
    const tooltipText = this.props.title;
    // init a tooltip
  }

  componentWillUnmount() {
    // clean up a tooltip
  }
}

用起来像：

<Tooltip title="foo"><Foo/></Tooltip>

这里的问题是。。要将工具提示应用于具有属性“tooltip”的DOM元素，还是要对指定了属性“tooltip”的节点进行响应？解决方案可能会有所不同。实际上，对于第二种情况，我无法给出一个或多或少合适的解决方案。实际上，我想对DOM元素应用工具提示。第一种情况基本上是。因为对于React节点，我可以定义遇到工具提示道具时的行为。您可以使用

el

变量访问工具提示属性的值，对吗？我想这可能有用，对。但我无法预测如果DOM改变会发生什么。。。需要测试也可能存在一些性能问题。。这就是我能想到的。难道没有更多的“反应”方式来显示工具提示吗？就像你可以有一个“withTooptip”HOC或者类似的东西……我没有找到。这就是问题所在。但是，我可以用这种方法进行测试。并检查一些现成的模块是如何实现的。但我不想使用这些模块。非常感谢…祝你好运。。。！