小编典典

什么是仅适用于属性的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>
  );
}

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


阅读 273

收藏
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