React顶层API

1.React.children.map(props.children, mapFunc)

1)该方法用于安全的遍历组件children。

2)该方法可以平铺嵌套数组的返回值。

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;

function User(props) {
    // props.children取值有三种:
    // 1.无子节点-undefined
    // 2.一个文本/元素-字符串或者对象
    // 3.多个节点-数组
    // 所以使用map可能会有问题,但是React.Children.map解决了这个问题
    return (
        <>
            {
                React.Children.map(props.children, (item,index) => <div key={index}>{item}</div>)
            }
        </>
    )
}

ReactDOM.render(
    <User>
        1
    </User>, window.root)

原文地址:https://www.cnblogs.com/lyraLee/p/11557798.html

时间: 2024-10-09 08:32:11

React顶层API的相关文章

React 顶层 API

概览 组件 使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护.你可以通过子类 React.Component 或 React.PureComponent 来定义 React 组件. React.Component React.PureComponent 如果你不使用 ES6 的 class,则可以使用 create-react-class 模块来替代.请参阅不使用 ES6 以获取更多详细信息. React 组件也可以被定义为可被包装的函数: React.memo

ReactJS入门(三)—— 顶层API

本文基本跟着官方文档把API都走一遍,但会有实例来解释应该怎么用,木有比我更详细的API文档咯. React.createClass 参数:CONFIG(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null/false(表示啥都不渲染): var Component = React.createClass({ render: function() { return th

React入门--------顶层API

React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由其他不限结构的容器)或null/false(表示啥都不渲染): var Component = React.createClass({ render: function() { return this.props.a==1 ? <div><h1>标题</h1><p&g

react中文API解读一(快速开始)

记下自己的react学习之路 ,官方文档写的很详尽,学起来应该比较简单 官方文档地址:react.http://reactjs.cn/react/docs/getting-started.html 1.1   全局安装命令行工具(依赖 npm) 在任何目录进行全局安装,效果都是一样的.所以可以不切入到项目文件夹. npm install -g react-tools 1.2jsx文件转成标准的 JavaScript: jsx --watch src/ build/

React + fetch API + 百度地图api + 跨域 填坑

做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的时候,不可避免的出现了跨域问题. fetch(baseUrl + 'location=39,116&output=json&ak=您的ak&c

React API

组件 API setState 合并 nextState 和当前 state. 这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法. 另外,也支持可选的回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用 注意: 绝对不要直接改变 this.state, setState() 不会立刻改变 this.state,而是创建一个即将处理的 state 转变.在调用该方法之后获取 this.state 的值可能会得到现有的值,而不是最新设置的值. setState()

[深入剖析React Native]React 初探

认识React React是一个用于构建用户界面的JavaScript库. React主要用于构建UI,很多人认为React是MVC中的V,即视图. React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源. React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和实用它. React特点 声明式设计 - React**采用声明范式**,可以轻松描述应用. 高效 - React通过对DOM的模拟,最大限度地减少与DOM的交互. 灵活 - R

React.Children

React.Children 标签: reactchildren 2016-02-23 10:48 5144人阅读 评论(0) 收藏 举报  分类: React(10)  来源 React.Children 是顶层API之一,为处理 this.props.children 这个封闭的数据结构提供了有用的工具. this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性.它表示组件的所有子节点. 1.react.Children.map

7、手把手教React Native实战之ReactJS

ReactJS核心思想:组件化  维护自己的状态和UI  自动重新渲染 多个组件组成了一个ReactJS应用 React是全局对象   顶层API与组件API React.createClass创建组件类的方法 React.render渲染,将指定组件渲染到指定DOM节点 render:组件级API,返回组件的内部结构 React.render被ReactDOM.render替代 ##7.配套视频(下载地址):https://yunpan.cn/cYNfQsCXm3byY  访问密码 cf7f