react-dom

作者: 大诗兄_zl | 来源:发表于2017-10-11 11:43 被阅读14次

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类(查看demo04)。

varHelloMessage=React.createClass({render:function(){return

Hello{this.props.name}

;}});

ReactDOM.render(,document.getElementById('example'));

上面代码中,变量HelloMessage就是一个组件类。模板插入时,会自动生成HelloMessage的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的render方法,用于输出组件。

注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。

this.props.children的值有三种可能:

如果当前组件没有子节点,它就是undefined;

如果有一个子节点,数据类型是object;

如果有多个子节点,数据类型就是array。

所以,处理this.props.children的时候要小心。

React 提供一个工具方法React.Children来处理this.props.children。我们可以用React.Children.map来遍历子节点,而不用担心this.props.children的数据类型是undefined还是object。更多的React.Children的方法

相关文章

  • react-dom react-router react-rou

    React-dom 提供了针对DOM的方法Import ReactDOM from ‘react-dom'Reac...

  • React 笔记二:react-dom

    React 笔记二:react-dom 对应的API 注:react-dom/server是专门针对server端...

  • 六、react基本概念

    1、react-dom和react为什么要分开因为还有react-dom、react-canvas、react-a...

  • react-dom

    react-dom包提供了DOM的特定方法。 render()和hydrate() 都是将React元素渲染到容器...

  • react-dom

    React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。...

  • note/2-5服务端渲染基础配置

    介绍 react-dom是React专门为web端开发的渲染工具。我们可以在客户端用react-dom的rende...

  • 常用的版本

    "webpack": "4.41.2", "react": "16.12.0","react-dom": "16....

  • react-dom/server

    react-dom/server能够使将组建渲染为静态标记,通常使用与Node服务端做服务端渲染上。 render...

  • React-dom6 重定向

    React-dom 6 重定向写法

  • npm命令整理

    npm install --save react react-dom babelify babel-preset-...

网友评论

      本文标题:react-dom

      本文链接:https://www.haomeiwen.com/subject/hxhbyxtx.html