study
/
react
/
48th.html

<!DOCTYPE html>
<html>
<head>
	<title>react-component-兄弟组件传值</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>

</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    class ParentList extends React.Component{
        constructor(){
            super();
            this.state = {
                name:'123'
            };
        };
        Change(data){
            this.setState({
                name:data
            })
        }
        render(){
            return (
                <div>
                    <ChildA handle={(e)=>this.Change(e)}/>
                    <ChildB name={this.state.name}/>
                </div>
                )
        }
    };
    class ChildA extends React.Component{
        render(){
            return (
                <div>
                    <h1>A</h1>
                    <button onClick={()=>this.props.handle("ChildA")}>click</button>
                </div>
            )
        }
    };
    class ChildB extends React.Component{
        render(){
            return (
                <div>
                    <h1>B</h1>
                    <h1>{this.props.name}</h1>
                </div>
            )
        }
    };
     ReactDOM.render(
          <ParentList/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>