angularjs-directive - 仅适用于属性的 Angular 指令在 React 中的等价物是什么？

Question

例如，您可以有一个 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>
  );
}

我是否遗漏了类似的东西？是否有不同但功能相似的等效项？或者也许这个问题只是表明我错过了“ react 方式”的某些部分，我不应该这样做。谢谢!

Answer 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 Prop 。

从 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>