例如,您可以使用如下所示的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> ); }
有没有可能我一直想念的东西?是否有不同但功能相似的等效项?或者,也许这个问题只是表明我缺少“反应方式”的某些部分,所以我永远都不想这样做。谢谢!
考虑一下Angular和React在“幕后”所做的事情将是有帮助的。
在您的Angular示例中,当您编写时,<div classy/></div>您说的是“呈现DIV元素,然后将classy指令定义的行为附加到该元素。
<div classy/></div>
classy
在您的React示例中,当您编写时<MyComponent classy></MyComponent>,您说的是:“创建MyComponent实例并将其传递给props { classy: true }。编译器(Babel或whathaveyou)会将其转换为以下JavaScript:
<MyComponent classy></MyComponent>
{ classy: true }
React.createElement(MyComponent, { classy: true });
因此,您的问题的答案是您无法编写文字,<MyComponent classy></MyComponent>因为MyComponent组件不知道如何处理该classy道具。在React中,您可以这样写:
MyComponent
class ClassyDiv extends React.Component { render() { const { className, ...rest } = this.props; return <div className={`${className || ''} stay-classy`} {...rest}/>; } }
之所以可行,是因为我们知道该React.DOM.div组件(像大多数DOM组件一样)知道如何处理该className道具。
React.DOM.div
className
从React 0.14开始,我们可以更简单地将此类内容表示为“纯”无状态功能组件,即接受props并返回渲染结果的函数:
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>