React.createElement使用

React.createElement一看这个就能和document.createElement方法类似,创建元素

document.createElement是创建一个指定的元素节点,其参数只有一个nodeName:document.createElement(nodeName)

React.createElement是创建指定类型的React元素节点,其参数有三个:React.createElement(type,props,children)

官方解释:

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

React.createElement官方使用示例:

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var child3 = React.createElement('li', null, 'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2, child3);
ReactDOM.render(
        root,
        document.getElementById('content')
);
第一个参数:必填,元素类型

第二个参数:可填,元素属性

第三个参数:可填,元素子节点


疑问:不是三个参数吗?

我们可以写成这样:

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var child3 = React.createElement('li', null, 'Third Text Content');
var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
ReactDOM.render(
        root,
        document.getElementById('content')
);

把第三个参数改成数组

所以React这种方式的写法很灵活,大家可以试试,看看效果!









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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值