父子组件之间传递数据 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/react/0.14.1/react.js"></script>
    <script src="http://cdn.bootcss.com/react/0.14.1/react-dom.js"></script>
    <script src="http://cdn.bootcss.com/babel-core/5.8.32/browser.min.js"></script>
    </head>
<body>
    <div id="App">
        
    </div>
</body>
<script type="text/babel">
    
    class ParentComp extends React.Component{
        constructor(...args){
            super(...args);
            this.state = {
                value:1
            }
        }

        fn(){
            this.setState({
                value: this.state.value + 1
            })            
        }
        render(){
            return (
                <div>
            <input type = "button" value = "aaa" 
            onClick = {this.fn.bind(this)} />
            <ChildComp name = {this.state.value} />//为ChildComp组件指定了一个name属性
            </div>
            )    
        }
    }

    class ChildComp extends React.Component{
        
        render(){
            return <span>{this.props.name}</span>//在组件类中使用props获取属性
        }
    }

    window.onload = function(){
        var div = document.getElementById('App');
        ReactDOM.render(
        <ParentComp/>,
        div
        );
    }
    
</script>
</html>

在父组件的输出中可以引用子组件。 属性是从父组件传递给子组件的。

组件的属性：

　　指定属性：一般是在< />这种标签中指定属性，这时候属于

　　获取属性：在组件类中使用this.props获取属性

上例中，我们在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。而最后的渲染只需要渲染父组件即可。　　

posted on 2017-04-04 00:19  大娃二娃  阅读(299)  评论(0)  编辑  收藏  举报

导航