React 组件协同使用之组件嵌套

最新推荐文章于 2024-09-03 10:37:19 发布

百奇

最新推荐文章于 2024-09-03 10:37:19 发布

阅读量277

点赞数

分类专栏： ReactJs

本文链接：https://blog.youkuaiyun.com/qq_43264596/article/details/84717294

版权

ReactJs 专栏收录该内容

21 篇文章

订阅专栏

本文探讨了组件嵌套的概念，即组件之间的父子关系及其通信方式。详细解析了父组件如何通过属性与子组件通信，以及子组件如何通过触发事件与父组件交互。同时讨论了组件嵌套的优点如逻辑清晰、代码模块化和封装细节，以及缺点如编写难度和细节掌握问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、组件嵌套的含义
组件嵌套的本质是父子关系
父组件与子组件的通信关系
父组件通过属性与子组件通信
子组件向父组件通信是一个间接的关系父组件中的事件处理函数被子组件触发子组件触发事件后然后父组件进行处理比如子组件有个点击事件Click 然后父组件有个handelClick函数并且通过属性传递给子组件然后子组件会绑定到自己的点击事件上当子组件进行点击事件的时候触发的就是父组件的handelClick函数这个过程有个专门的名称叫做委托
2、组件嵌套的优缺点
优点：
逻辑清晰：父子关系
代码模块化：每个模块对应一个功能，不同的模块可同步开发
封装细节：开发者只需要关注组件的功能，不用关心组件的实现细节
缺点;
编写难度高：父子关系的具体实现需要经过深思熟虑
无法掌握细节：使用者只知道组件的用法，不知道实现细节，遇到问题难以修复
3、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套实例演示</title>
</head>
<body>
<script src="../jquery-3.3.1.js"></script>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="../JSXTransformer.js"></script>
<script type="text/jsx">
    var GenderSelect = React.createClass({
        render:function () {
            return <select onChange={this.props.handleSelect}>
                <option value="0">男</option>
                <option value="1">女</option>

            </select>
        }
    });
    var SignFoem =React.createClass({
        getInitialState:function () {
            return {
                name:'',
                password:'',
                gender:'',
            }
        },
        handleChange:function (name,event) {
            var newState={};
            newState[name] = event.target.value
            this.setState(newState)
        },
        handleSelect:function (event) {
            this.setState({
                gender:event.target.value
            })
        },
        render:function () {
            console.log(this.state)
            return <form>
            {/**
                 onChange={this.handleChange.bind(this,'name')}
                 这句代码的意思是调用bind 来让函数判断是那个位置调用的这个handleChange函数    bind 适用于 多个地方调用同样的函数 不用每个地方写一个函数来调用减少代码 量
                 */}
                <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this,'name')}/>
                <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this,'password')}/>
                <GenderSelect handleSelect={this.handleSelect}/>
            </form>
        }
    });
    ReactDOM.render(<SignFoem/>,document.body);
</script>

</body>
</html>