什么是仅适用于属性的 Angular 指令的 React 等价物? [英] What is the React equivalent of an Angular directive that only works on attributes?

问题描述

例如，您可以像这样有一个 angular 指令:

angular.module('app').directive('classy', function() {返回 {限制:'A'，链接:函数($scope，$el){$el.addClass('保持优雅');}}}

并像这样实现:

在阅读了大多数文档和谷歌搜索后，我在 React 中似乎没有类似的东西.我希望是这样的:

<代码>...渲染:函数(){返回 (<MyComponent classy></MyComponent>);}

有没有可能是我遗漏的东西?是否有不同但功能相似的等价物?或者也许这个问题只是表明我错过了反应方式"的某些部分，我不应该想要这样做.谢谢！

解决方案

考虑一下 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 {使成为() {const { className, ...rest } = this.props;return <div className={`${className ||''} 保持优雅`} {...rest}/>;}}

这是可行的，因为我们知道 React.DOM.div 组件(像大多数 DOM 组件一样)知道如何处理 className 属性.

从 React 0.14 开始，我们可以更简单地将类似的东西表达为纯"无状态功能组件，即接受 props 并返回渲染结果的函数:

function AlsoClassyDiv(props) {const { className, ...rest } = props;return <div className={`${className ||''} 保持优雅`} {...rest}/>;};

您可以在下面的代码段中看到两种方法的实际效果.

class ClassyDiv extends React.Component {使成为() {const { className, ...rest } = this.props;return <div className={`${className ||''} 保持优雅`} {...rest}/>;}}function AlsoClassyDiv({ className, ...props }) {return <div className={`${className ||''} 保持优雅`} {...道具}/>;};ReactDOM.render(<div id="容器"><div>普通 div</div><ClassyDiv>ClassyDiv!</ClassyDiv><AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv>

,文件体);

.stay-classy { 字体:粗体 3em Helvetica;文本阴影: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>

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

And implement like so:

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

解决方案

It will be helpful to consider what Angular and React are each doing "behind the scenes."

In your Angular example, when you write <div classy/></div> you're saying "render a DIV element and then attach to it the behaviors defined by the classy directive.

In your React example, when you write <MyComponent classy></MyComponent>, you're saying, "create an instance of MyComponent and pass it the props { classy: true }. The transpiler (Babel or whathaveyou) will turn it into the following JavaScript:

React.createElement(MyComponent, { classy: true });

So the answer to your question is that you can't write <MyComponent classy></MyComponent> because MyComponent component doesn't know what to do with the classy prop. In React, you might write something like this instead:

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

This works because we know the React.DOM.div component (like most DOM components) knows what to do with the className prop.

Since React 0.14 we can express something like this more simply, as a "pure" stateless functional component, i.e. a function that accepts props and returns the rendered result:

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

You can see both approaches in action in the below snippet.

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>

这篇关于什么是仅适用于属性的 Angular 指令的 React 等价物?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！