什么是只对属性有效的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>
  );
}

是否有类似的东西可能会让我失踪？是否有不同但功能相似的等价物？或者也许这个问题只是表明我错过了“反应方式”的某些部分＆＃34;我不应该这样做。谢谢！

Answer 1

考虑Angular和React各自在幕后做什么将会很有帮助。＆＃34;

在你的Angular示例中，当你写<div classy/></div>时，你会说＆＃34;呈现一个DIV元素，然后将classy指令定义的行为附加到它上面。

在您的React示例中，当您编写<MyComponent classy></MyComponent>时，您正在说，＆＃34;创建一个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组件一样）知道如何处理className道具。

自从React 0.14以来，我们可以更简单地表达这样的东西，作为一个纯粹的＆＃34;无状态功能组件，即接受道具并返回渲染结果的函数：

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

您可以在下面的代码段中看到这两种方法。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

有角度的有用指令的一个很好的例子是

<a href="#target" class="smooth-scroll">Target</a> 

smoothScroll指令将拦截click事件，然后使用window scroll或jquery scrollTo来应用所有方式的动画。

html中的任何地方都可以简单地使用指令驱动的类名。

React中没有这种东西。要在React中执行此操作，您必须创建一个特殊的链接组件来代替：

<a> like ASmooth....

Answer 4

看我的朋友，我的状况并不理想，但长话短说，angularJS指令实际上是一个组件。因此，angularJs指令背后的想法是创建具有自己的作用域数据和对其进行操作的方法的组件。我以同样的方式思考，并在这里找到了您的文章，但我找不到答案。但是，感谢您的工作经验，我考虑了一下，并且知道如何做。

我想为列表中的每个链接项添加一个编辑按钮，以仅切换每个链接项的编辑表单，因此每个ListItem应该是一个独立的组件，这样我就为每个链接项都具有独立状态，然后将其打开＆off。