React 父子组件互相交互

最新推荐文章于 2024-05-14 16:05:47 发布

Cribug8080

最新推荐文章于 2024-05-14 16:05:47 发布

阅读量654

点赞数

分类专栏： react js 文章标签：父子组件交互

本文链接：https://blog.csdn.net/Cribug8080/article/details/89205324

版权

js 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

react

12 篇文章 0 订阅

订阅专栏

script分为三个部分：

ReactDOM.render
Father 构造父组件
Sub 构造子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react 组件通信</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        class Father extends React.Component{
            constructor(){
                super()
                this.state = {
                    style:{color:'red'},
                    html:'hello',
                    sonText:'你好',
                }
            }

            changeSon(args){
                let str = args?'你好儿子':'hello son'
                this.setState({
                    sonText:str
                })
            }

            render(){
                const fatherFn = (color)=>{
                    this.setState({
                        style:{color:color},
                    })
                    console.log('fatherFn',this.state.style)
                }

                return (
                    <div>
                        <h1 style={this.state.style}>{this.state.html}-father-{this.state.style.color}</h1>
                        <button onClick={()=>{this.changeSon(1)}}>父亲</button>
                        <button onClick={()=>{this.changeSon(0)}}>father</button>
                        <Sub say={this.state.sonText} fatherEvent={fatherFn.bind(this)}/>
                    </div>
                )
            }
        }

        class Sub extends React.Component{
            subFn(color){
                return ()=>{
                    console.log('fn Sub')
                    this.props.fatherEvent(color);
                }
            }

            render(){
                return (
                    <div>
                        <h3>Sub</h3>
                        <h3>{this.props.say}</h3>
                        <button onClick={this.subFn('red')}>儿子红</button>
                        <button onClick={this.subFn('blue')}>儿子蓝</button>
                        <button onClick={this.subFn('green')}>儿子绿</button>
                        <button onClick={this.subFn('black')}>son</button>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <div>
                <Father />
            </div>,
            document.getElementById("example")
        )
    </script>
</body>
</html>

Cribug8080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 父子组件互相交互

script分为三个部分：ReactDOM.renderFather 构造父组件Sub 构造子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
复制链接

扫一扫

专栏目录