React中文教程 - Mixins | Traits（代码组合|代码复用机制）

最新推荐文章于 2022-02-26 00:05:00 发布

rsspub

最新推荐文章于 2022-02-26 00:05:00 发布

阅读量1.8k

点赞数

分类专栏： React 文章标签： React Mixins Traits 代码复用机制

本文链接：https://blog.csdn.net/rsspub/article/details/9024915

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

代码组合是为了让多个组件之间封分享代码，实现代码复用机制，概念与Python中的Mixins和PHP的Traits相类似。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>React | Mixins</title>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
<style>a{color:#00f;cursor:pointer;}a:hover{text-decoration:underline;}</style>
</head>
<body>
<script type="text/jsx">
/** @jsx React.DOM */
var Mixin1 = {
  componentDidMount: function() {
    console.log('Mixin1.componentDidMount()');
  }
};

var Mixin2 = {
  componentDidMount: function() {
    console.log('Mixin2.componentDidMount()');
  }
};


var MyComponent = React.createClass({
  mixins: [Mixin1, Mixin2],
  render: function() {
    return <div>hello world</div>;
  }
});
var myMyComponent = <MyComponent />;
React.renderComponent(myMyComponent, document.body);
</script>
</body>
</html>