react第五天组件间数据、方法如何获取

最新推荐文章于 2023-08-17 14:31:30 发布

qq_40262972

最新推荐文章于 2023-08-17 14:31:30 发布

阅读量300

点赞数

分类专栏： react 文章标签： react 组件数据传递

本文链接：https://blog.csdn.net/qq_40262972/article/details/95309519

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

react初学day05

父组件使用子组件的方法
兄弟组件传递
- 通过父组件
- 兄弟组件相互
react表单元素的某些属性会和html中不同
组件间嵌套的内容如何获取

父组件使用子组件的方法

类似于vue组件，react也有ref链存在

<body>
    <div id="app"></div>
	// 这是一个父亲踹儿子的实例，踹一脚之后儿子的状态从打游戏变成学习
	// 因为状态只能自身去改变，所以改变自身状态的函数永远在自己的组件中封装，其他地方只是调用这个方法
    <script type="text/babel">
        let Father = React.createClass({
            kickSon(){
                /* console.log(this.refs);
                this.refs.son.changeDoing(); */
                this.son.changeDoing()
            },
            render(){
                return (
                    <div>
                        <p>这是一个父组件</p>
                        <p><button onClick={this.kickSon}>踹一脚</button></p>
                        {/* <Son ref="son"/> */}
                        <Son ref={(el)=>{this.son=el}}/>
                    </div>
                )//有两种写法，推荐第二种，this这种，据说
                //可以当组件一旦销毁的时候，可以解除组件自身的一些引用关系，从而避免内存泄漏。
                //不要问我，这句话我不懂，这是大神说的
            }
        });
        let Son = React.createClass({
            getInitialState(){
                return {
                    doing: "打游戏"
                }
            },
            changeDoing(){
                this.setState({
                    doing: "学习"
                })
            },
            render(){
                return (
                    <div>
                        <p>这是子组件=====》{this.state.doing}</p>
                    </div>
                )
            }
        });
        ReactDOM.render(<Father/>,app);
    </script>
</body>

兄弟组件传递

通过父组件

<style>
    .son2{ width: 100px;  height: 100px; border:1px solid #333; }
</style>
<body> //这个实例是点击按钮时，div变颜色
    <div id="app"></div>
    <script type="text/babel">
        //通过父组件做媒介
        let Box = React.createClass({
            getInitialState(){ //初始化color这个状态
                return {
                    color: "red"
                }
            },
            changeColor(){  //下面会把这个方法传递给子组件
                this.setState({
                    color: getRandomColor()
                })
            },
            render(){
                return (
                    <div>
                        <Button changeColor={this.changeColor}/>  {/*将方法传递给子组件*/}
                        <Content color={this.state.color}/>{/*将状态传递给子组件*/}
                    </div>
                )
            }
        });
        let Button = React.createClass({
            render(){
                return (
                    <div>{/*通过props接收方法*/}
                        <button onClick={this.props.changeColor}>change</button>
                    </div>
                )
            }
        });
        let Content = React.createClass({
            render(){
                return (  /*通过props接收*/
                    <div className = "son2" style={{background:this.props.color}}></div>
                )
            }
        });

        ReactDOM.render(<Box/>,app);
        function getRandomColor(){  //这是个生成随机色的方法，注意这里定义在组件外面，所以上面调用的时候没有通过this调用
            return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 
        }
    </script>
</body>

兄弟组件相互

<style>
    .son2{ width: 100px; height: 100px; border:1px solid #333; }
</style>
<body>
	/*  这个实例和上面的是一样的，但是实现方法不同
		这个方法显得很乱，简单先说一下
		状态不在父组件了，谁颜色变就放谁身上，同时改变属性的方法也在自身上定义
		但是触发改变的地方在兄弟组件<Button/>组件上，要做的就是把这个方法传递给自己的兄弟组件
		首先<Content/>组件先将方法传递给父组件，然后父组件在自身定义另一个方法，调用<Content/>
		传递过来的changeColor方法，接着将父组件的changeColor方法传递给<Button/>
		Button/>组件再通过this.props.changeColor去调用，这里调用的是父组件的方法
	*/
    <div id="app"></div>
    <script type="text/babel">
        let Box = React.createClass({
            changeColor(){
                this.content.changeColor();
            },
            render(){
                return (
                    <div>
                        <Button changeColor={this.changeColor}/>
                        <Content ref={el=>{this.content=el}}/>
                    </div>
                )
            }
        });
        let Button = React.createClass({
            render(){
                return (
                    <div>
                        <button onClick={this.props.changeColor}>change</button>
                    </div>
                )
            }
        });
        let Content = React.createClass({
            getInitialState(){
                return {
                    color: "black"
                }
            },
            changeColor(){
                this.setState({
                    color: getRandomColor()
                })
            },
            render(){
                return (
                    <div className = "son2" style={{background:this.state.color}}></div>
                )
            }
        });

        ReactDOM.render(<Box/>,app);
        function getRandomColor(){ 
            return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 
        }
    </script>
</body>

react表单元素的某些属性会和html中不同

render:function () {
   return (
        <form>
        	{/*<label for="user">用户：</label>*  这样点击label无法选中对应的input框*/}
            <label htmlFor="user">用户：</label>
            {/*<input id="user" type="text" value="asdsd"/>*  这样input的value虽然会显示，但是框中的value无法被改变*/}
            <input id="user" type="text" defaultValue="asdsd"/>
            {/*<input type="checkbox" checked/> 虽然可以默认选中，但是一直是被选中的状态*/}
            <input type="checkbox" defaultChecked/>
        </form>
    )
}

组件间嵌套的内容如何获取

<Dialog>
	<h3>我是h32</h3>
	<p>我是p段落</p>
</Dialog>
	/*children中存储着嵌套的内容*/
{this.props.children[0]}
{this.props.children[1]}

qq_40262972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react第五天组件间数据、方法如何获取

react初学day05父组件使用子组件的方法兄弟组件传递通过父组件兄弟组件相互react表单元素的某些属性会和html中不同组件间嵌套的内容如何获取父组件使用子组件的方法类似于vue组件，react也有ref链存在<body> <div id="app"></div> // 这是一个父亲踹儿子的实例，踹一脚之后儿子的状态从打游戏变成学习 //...
复制链接

扫一扫

专栏目录