入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

React.createElement使用

创建时间:2016-10-10 投稿人: 浏览次数:114

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这种方式的写法很灵活,大家可以试试,看看效果!









声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像