React 中自定义组件，如何更好地创建多个属性

Question

我创建了一个父组件，里面有一个子组件，这个子组件有很多属性，这些属性来自于父组件的状态值（并没有使用状态管理类的模块），因此在在创建子组件的时候，代码写的很啰嗦。

reForm=<RegisterForm
 name={this.state.name}  telephone1={this.state.telephone1}
 idCard={this.state.idCard} sex={this.state.sex} nation={this.state.nation} 
 birth={this.state.birth}   telephone2={this.state.telephone2}
    />;
    

想请问有没有一种更加高效的代码组织方式，比如

const {name,telephone1,idCard,sex,nation,birth,telephone2}=this.state;

这是ES6中的语法，能够很简介地创建多个const变量。能不能在这里有所借鉴呢？

Answer 1

可以这样试试，封装成一个对象，将值都放对象里面 
 this.state = {
        baseInfoObj:{
        name:'',
        telephone1:'',
        //等等.....
        }
}
reForm=<RegisterForm baseInfoObj={this.state.baseInfoObj} />;

Answer 2

首先变量解构，减少属性的重复访问

const {name, telephone1, idCard, sex, nation, birth, telephone2} = this.state

组件就可以这么写了:

reForm=<RegisterForm
 name={name}  telephone1={telephone1}
 idCard={idCard} sex={sex} nation={nation} 
 birth={birth}   telephone2={telephone2}
    />;

简单很多，性能也也优化了

Answer 3

其实吧，做个浅拷贝不就行了。。。当然，不知道这么做靠谱不靠谱。。。

<RegisterForm info={{...this.state}} />;

Answer 4

<RegisterForm {...this.state} />;