什么是只对属性有效的Angular指令的React等价物？

Question

例如,您可以使用角度指令,如下所示:

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>
  );
}

有没有这样的事情我可能会失踪？是否有不同但功能相似的等价物？或许这个问题只是表明我错过了"反应方式"的某些部分,我不应该这样做.谢谢!

Answer 1

考虑Angular和React各自在"幕后"做什么将会很有帮助.

在您的Angular示例中,当您编写时,<div classy/></div>您正在说"渲染DIV元素,然后将classy指令定义的行为附加到其上" .

在你的React示例中,当你编写时<MyComponent classy></MyComponent>,你会说,"创建一个MyComponent实例并将其传递给道具{ 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组件一样)知道如何处理classNameprop.

由于React 0.14我们可以更简单地表达这样的东西,作为一个"纯粹的"无状态功能组件,即一个接受道具并返回渲染结果的函数:

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>

Answer 2

实现类似行为的一种方法是使用 React 类 mixins