仅对属性起作用的 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 way" 的某些部分，我不应该这样做。谢谢！

Answer 1

考虑一下 Angular 和 React 各自在做什么会很有帮助 "behind the scenes."

在您的 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 组件一样）知道如何处理 className 属性。

从 React 0.14 开始，我们可以更简单地表达这样的东西，作为一个 "pure" 无状态功能组件，即一个接受 props 和 returns 渲染结果的函数：

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

Answer 3

angular 中有用指令的一个很好的例子是

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

smoothScroll 指令会拦截点击事件，然后使用 window scroll 或 jquery scrollTo 应用各种动画。

html 中的任何地方都可以简单地使用指令 powered class 名称。

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

<a> like ASmooth....

Answer 4

看我的朋友，我没让你好，但长话短说，angularJS 指令实际上是一个组件。所以 angularJs 指令背后的想法是创建具有自己的范围数据的组件和它自己的操作方法。我和你的想法一样，在这里找到了你的 post，但我找不到答案。但是多亏了工作经验，我想了想，知道怎么做了。

我想为列表中的每个 link 项目添加一个编辑按钮，以仅切换每个项目的编辑表单，这样每个 ListItem 都应该是一个独立的组件，这样我就有了每个项目的独立状态一个，我打开和关闭它。

Answer 5

我一直在寻找一种方法来重现用于应用样式或使用组件的指令系统。

您可以创建一个与 children 一起玩的组件，然后渲染它们：

function TextCenter(props) {

  // Iterates over children and clone it with custom props
  const children = React.Children.map(
    props.children,
    (child) => React.cloneElement(child, { className: 'text-center' }
  )

  // Render the children
  return <>{children}</>;
}

function MyComponent() {
  return (
    <TextCenter>
      <div>
        <h1>Hello centered world</h1>
        <p>Yessss</p>
      </div>
    </TextCenter>
  )
}

这里有一个更强大的响应式文本对齐示例：

interface Props extends Breakpoints<'start' | 'center' | 'end'>{}

export const TextAlign: FunctionComponent<Props> = (props) => {
  const className = generateClassName('text', props);
  const children = React.Children.map(props.children, child => React.cloneElement(child as ReactElement, { className }))

  return (
    <>
      {children}
    </>
  )
}

export const MyComponent: FunctionComponent<Props> = (props) => {
  return (
    <div>
      <TextCenter xs="center" md="start">
        <h1>I am centered on mobile but not on desktop</h1>
      </TextCenter>
    </div>
  )
}

There are two problems with this solution, when the children is a component, it must also have the prop className and it also makes the HTML less clean as it adds a level in hierarchy.

仅对属性起作用的 Angular 指令在 React 中的等效项是什么？

What is the React equivalent of an Angular directive that only works on attributes?

angularjs-directive

reactjs