父子組件之間傳遞數據

時間 2019-11-19

標籤父子組件之間傳遞數據简体版

原文原文鏈接

<!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>