React-组件的复合

在传统的HTML中,元素是构成页面的基础单元。但在React中构建页面的基础单元室React组件,可以在React组件中混入JavaScript表达能力的HTML元素。实际上写React代码主要就是构建组件,就像是编写文旦时使用元素一样。

本质上一个组件就是一个JavaScript函数,它接受属性(props)和状态(state)作为参数,并输出渲染好的HTML。组件一般被用阿里呈现和表单应用的某部分数据,因此可以把React组件理解成HTML元素的扩展。

 

一、扩展HTML

React+JSX是强大而富有表现力的工具,允许我们使用类似HTML语法创建自定义元素。比起单纯的HTML,他们还能控制生命周期中的行为,这些都是React.createClass方法开始的。

相较于集成,React偏爱复合(composition)即通过小巧的、简单的组件和数据对象,构建大而复杂的组件。

 

二、组件复合的例子:

一个渲染选择题的组件要满足以下几个条件:

接收一组选项作为输入。

把选项渲染给用户。

只允许用户选择一个选项。

HTML提供了一些基本的元素——单选类型的输入框和表单组(input group),可以在这里使用。组建的层级从上往下看是这样子的:

MutipleChoice 有一个 ReadioInput有一个 Input(type="radio")

 

以上就是组合模式(composition pattern)的特征。

 

三、组装HTML|

React.DOM.input的命名空间域定义了input组件,因此我们要做的第一件事情是把它封装进一个RadioInput组件。这个组件负责定制原本通用的input,将其精缩成与单选按钮行为一致的组件。

先建立一个脚手架,其中包含所需要的渲染的方法和基本地的标记,用以描述想输出的界面。组合模式开始显现,组件变成了特定类型的输入框。

var AnswerRadioInput =React.createClass({

render : funciton(){

return(
        <div className=
radio>

<label>

<Input type="radio"/>

Label Text

</label>

      </div>
);
}

 

});

 

四、添加动态属性

现在input还没有内容是动态的,所以下一步需要定义父元素必须传给单选框的那些属性。

这个输入框代表什么值或者选项?

用什么文本来描述它?

这个输入框的name是什么?

也许需要自定义id

也许要重载它默认值。

 

有上述列表之后就可以定义一个input属性类型了,我们把这些添加到类的PropTypes对象中。

var AnwerRadioInput=React.createClass({

propTypes:{

id:React.PropTypes.string,

name:React.PropTypes.string.isRequired,

value:React.PropTypes.string.isRequired,

checked:React.Proptypes.bool

 

},

...

});

 

对于每个非必需的属性我们需要为其定义一个默认值。把他们添加到getDefaultProps方法当中。在每个新的实例当中,如果父组件没有提供它们数值,这些值就会被使用,由于这个方法只会在类上调用一次,而不是在每一个实例上都调用,因此不能再这里提供id——每个实例应该保持id的唯一性,这个问题可以用个接下来讲的(state)来解决。

var AnswerRadioInput =React.createClass({

propTypes:{...},

getDefaultProps:function(){

return{

id:null,

checked:false

};

},

 

});

 

五、追踪状态

我们的组件记录随时间变化而变化的数据。尤其对于每个实例来说都要求是唯一的id,以及用户可以随时更新的checked值。那我们来定义初始化状态。

var AnswerRadioInput =React.creteClass({

propTypes:{ ...},

getDefaultProps:function(){...},

getInitialState:function(){

var id=this.props.id?this.props.id:uniqueId('radio-')'

return{

checked: !!this.props.checked,

id:id,

name:id

};

 

},

});

 

六、整合到父组件当中

构建下一层——AnswerMultiplechoiceQuestion,这一层的主要作用是渲染一列选项让用户从中选择。按照上面介绍的模式,我们来创建这个组件基本的HTML和默认属性。

var AnswerMultipleChoiceQuestion=React.createClass({

proptypes:{

value:React.Proptypes.string,

choices:React.PropTypes.array.isRequired,

onCompleted:React.Proptypes.func.isrequired

},

getInitialState:function(){

return{

id:uniqueId('multiple-choice-'),

value:this.props.value

};

},

render:function(){

return(

<div classsName="form0group">

<label className ="survey-item-label"htmlFor={this.state.id}

</label>

<div className ="survey-item-content">

<AnswerRadioInput .../>

...

</AnswerRadioInput .../>

</div>

</div>

 

);

}

});

为了生成一列单选框子组件,我们需要对选项列表进行映射,把每一个选项转换为一个组件,这一点通过辅助函数很容易就处理好了

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值