zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components.

    Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called cross-cutting concerns. React provides mixins to solve this problem.

    https://facebook.github.io/react/docs/reusable-components.html

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React Lesson 12: Mixins</title>
        <script src="http://fb.me/react-0.8.0.js"></script>
        <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
        <style>
            body {
                margin: 25px;
            }
        </style>
    </head>
    <body>
    <div id="panel"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
    
        var ReactMixin = {
            componentWillMount: function(){
                console.log("will mount")
            },
            getInitialState:function(){
                return {count:0}
            },
            incrementCount:function(){
                this.setState({count:this.state.count+1})
            }
        };
    
        var APP = React.createClass({
    
            render: function(){
                return (
                        <div>
                            <ButtonComponent val="This is a button"></ButtonComponent>
                            <InputComponent val="this is a input"></InputComponent>
                        </div>
                );
            }
        });
    
        var ButtonComponent = React.createClass({
            mixins: [ReactMixin],
            render: function(){
                return (
                        <button onClick={this.incrementCount}>{this.props.val} -- {this.state.count}</button>
                );
            }
        });
    
        var InputComponent = React.createClass({
            mixins: [ReactMixin],
            //Can double the function in the mixin, React will combine both
            componentWillMount: function(){
                this.inc = setInterval(this.incrementCount, 500);
            },
            unmount: function() {
                this.componentWillUnmount();
            },
            render: function() {
                return (
                        <div>
                        <input type="text" value={this.props.val +' -- '+ this.state.count}/>
                        <button onClick={this.unmount}>unmount</button>
                        </div>
                );
            },
            componentWillUnmount: function() {
                clearInterval(this.inc);
            }
        });
    
        React.renderComponent(
                <APP />,
                document.getElementById('panel'))
    
    </script>
    </body>
    </html>
  • 相关阅读:
    写作的益处
    【转载】德鲁克:激发我一生的七段经历
    PS如何删除灰色的自动切片
    其他经验博文分类链接
    LODOP单个简短问答(小页面无需拖动滚动条)
    LODOP导出excel的页眉页脚
    LODOP导出和写入excel测试
    LODOP导出Excel简短问答和相关博文
    Lodop导出excel带数字格式
    LODOP批量打印判断是否加入队列1
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4366237.html
Copyright © 2011-2022 走看看