react.js - react在引入组件的时候对prop的书写那种方法比较好

问题描述

问 题

我在github看代码以及antd, 发现有几种写法

写法1:

    render() {

        return (
            <div>
                <Tools {...propTools}/>
                <CreateModal
                    ref={(form) => {this.form = form}}
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    onCreate={this.handleCreate}
                    onOk={this.handleCreate}
                />
            </div>
        );
    }

写法2:

    render() {
        const propCreateModal = {
            ref: (form) => {
                this.form = form
            },
            visible: this.state.visible,
            onCancel: this.handleCancel,
            onCreate: this.handleCreate,
            onOk: this.handleCreate,
        }
        return (
            <div>
                <Tools {...propTools}/>
                <CreateModal
                    {...propCreateModal}
                />
            </div>
        );
    }

第一种比较直观
第二种我没感觉出哪里好, 看具体的prop还要定位到声明的位置, 跳来跳去的, 很消耗人

解决方案

第一种写法好处：

1. 贴近 HTML 语法和 Vue 的模板语法

2. 可以不需要 rest 运算符

第二种写法好处：

1. JSX 组件层次结构更清晰，尤其是在组件多、嵌套深、逻辑复杂情况下；

2. 方便属性的复用，避免相同的组件重复配置：

     render() {
        const propCreateModal = {
            ref: (form) => {
                this.form = form
            },
            visible: this.state.visible,
            onCancel: this.handleCancel,
            onCreate: this.handleCreate,
            onOk: this.handleCreate,
        }
        
        const propCreateModal2 = Object.assign({}, propCreateModal, {
            visible: !this.state.visible
        })
        
        return (
            <div>
                <Tools {...propTools}/>
                <CreateModal
                    {...propCreateModal}
                />
                <CreateModal
                    {...propCreateModal2}
                />
            </div>
        );
    }

3.方便调试，可以在需要的时候将传入组件的属性打印出来：

console.log(propCreateModal)

两种写法各有好处，哪个好哪个差都不是绝对的。

这篇关于react.js - react在引入组件的时候对prop的书写那种方法比较好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！