什么是仅适用于属性的Angular指令的React等效项？

小编典典

什么是仅适用于属性的Angular指令的React等效项？

reactjs

例如，您可以使用如下所示的angular指令：

angular.module('app')
.directive('classy', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       $el.addClass('stay-classy');
    }
  }
}

并像这样实现：

<div classy></div>

阅读大多数文档并进行谷歌搜索后，我在React中似乎没有类似的东西。我希望有这样的东西：

...
render: function() {
  return (
     <MyComponent classy></MyComponent>
  );
}

有没有可能我一直想念的东西？是否有不同但功能相似的等效项？或者，也许这个问题只是表明我缺少“反应方式”的某些部分，所以我永远都不想这样做。谢谢！

阅读 272

2020-07-22

共1个答案

小编典典

考虑一下Angular和React在“幕后”所做的事情将是有帮助的。

在您的Angular示例中，当您编写时，<div classy/></div>您说的是“呈现DIV元素，然后将classy指令定义的行为附加到该元素。

在您的React示例中，当您编写时<MyComponent classy></MyComponent>，您说的是：“创建MyComponent实例并将其传递给props { classy: true }。编译器（Babel或whathaveyou）会将其转换为以下JavaScript：

React.createElement(MyComponent, { classy: true });

因此，您的问题的答案是您无法编写文字，<MyComponent classy></MyComponent>因为MyComponent组件不知道如何处理该classy道具。在React中，您可以这样写：

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

之所以可行，是因为我们知道该React.DOM.div组件（像大多数DOM组件一样）知道如何处理该className道具。

从React 0.14开始，我们可以更简单地将此类内容表示为“纯”无状态功能组件，即接受props并返回渲染结果的函数：

function AlsoClassyDiv(props) {
  const { className, ...rest } = props;
  return <div className={`${className || ''} stay-classy`} {...rest}/>;
};

您可以在下面的代码片段中看到两种方法都在起作用。

class ClassyDiv extends React.Component {

  render() {

    const { className, ...rest } = this.props;

    return <div className={`${className || ''} stay-classy`} {...rest}/>;

  }

}



function AlsoClassyDiv({ className, ...props }) {

  return <div className={`${className || ''} stay-classy`} {...props}/>;

};



ReactDOM.render(

  <div id="container">

    <div>Regular div</div>

    <ClassyDiv>ClassyDiv!</ClassyDiv>

    <AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv>

  </div>,

  document.body

);


.stay-classy { font: bold 3em Helvetica; text-shadow: 4px 4px 2px #aaa; }


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

2020-07-22