什么是相当于做出反应的角度指令，仅适用于属性？ [英] What is the React equivalent of an Angular directive that only works on attributes?

问题描述

例如，你可以在有指导的角度，像这样：

For example you could have a directive in angular like so:

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

和实施，像这样：

<div classy></div>

似乎没有成为一个相当于作出反应，我已经通过大多数阅读文档和谷歌上搜索后看到。我希望这样的事情：

There doesn't seem to be an equivalent in React that I've seen after reading through most the docs and googling. I was hoping for something like:

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

有没有类似的东西可能我已经错过？是否有不同但功能类似的相同呢？或者，也许这个问题，只是表明我失踪的响应方式的一些部分，我不应该曾经想要做到这一点。谢谢！

Is there something like that possible that I've been missing? Is there a different yet functionally similar equivalent? Or maybe this question just shows that I'm missing some part of the "React way" and I shouldn't ever want to do this. Thanks!

推荐答案

角，并作出反应之间的根本区别在于，在角你写HTML，然后角重视行为给它，但在作出反应你写的组件，这事发生在看像HTML，如果你使用JSX，但他们真的只是JavaScript的，并作出反应产生从他们的DOM元素。当你写JSX，甚至＆LT; D​​IV＆GT; 是一个阵营组件

A fundamental difference between Angular and React is that in Angular you write HTML and then Angular attaches behaviors to it, but in React you write components—that happen to look like HTML if you use JSX, but they're really just JavaScript—and React generates DOM elements from them. When you write JSX, even <div> is a React component.

所以回答你的问题是，你可以不写＆LT; D​​IV＆优雅GT; 因为 React.DOM.div 组件不知道做什么用的优雅属性来完成。在反应过来，你会写一个组件，而不是：

So the answer to your question is that you can't write <div classy> because the React.DOM.div component doesn't know what to do with the classy property. In React, you would have to write a component instead:

class ClassyDiv extends React.Component {
  constructor(props) {
    super(props);
    this.props.className = `${this.props.className} stay-classy`;
  }

  render() {
    return <div {...this.props} />;
  }
}

React.render(<ClassyDiv>Hello!</ClassyDiv>, document.body);
// => <div class="stay-classy">Hello!</div>

在出这种被称为高次成分，它只是意味着它是包装另一个组件（在这种情况下，组件 DIV ），并增加附加的行为或数据吧。

In React this is called a higher-order component, which just means that it's a component that wraps another component (in this case div) and attaches additional behavior or data to it.

这篇关于什么是相当于做出反应的角度指令，仅适用于属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！