React map items

最新推荐文章于 2023-06-14 10:39:44 发布
最新推荐文章于 2023-06-14 10:39:44 发布
阅读量419 收藏
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34351732/article/details/78568703
版权 
<html>
  <head>
      <title>Document</title>
      <script src="../react.js"></script>
      <script src="../react-dom.js"></script>
      <!-- //引用资源，JSX转HTML -->
      <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
      <div id="reactContainer"/>

      <script type="text/babel">
        const numbers = [1, 2, 3, 4, 5]
        const listItems = numbers.map((numbers) => 
          <li>{numbers}</li>
        )
        ReactDOM.render(
          <ul>{listItems}</ul>,
          document.getElementById('reactContainer')
        )
      </script>
  </body>
</html>

better

  <script type="text/babel">
        function NumberList(props) {
          const numbers = props.numbers
          const listItems = numbers.map(num => <li key={num}>{num}</li>)
          return (
            <ul>{listItems}</ul>
          )
        }

        const numbers = [1, 2, 3, 4, 5]

        ReactDOM.render(
          <NumberList numbers={numbers} />,
          document.getElementById('reactContainer')
        )
      </script>

extract

<script type="text/babel">
        function Item(props) {
          return (
            <li>{props.num}</li>
          )
        }

        function NumberList(props) {
          const numbers = props.numbers
          const listItems = numbers.map(num => <Item key={num} num={num}/>)
          return (
            <ul>{listItems}</ul>
          )
        }

        const numbers = [1, 2, 3, 4, 5]

        ReactDOM.render(
          <NumberList numbers={numbers} />,
          document.getElementById('reactContainer')
        )
      </script>
qq_34351732
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-items-carousel：项目轮播，内置有react-motion和样式化组件
02-03
轮播项目 安装 $ npm install react-items-carousel --save 例 import React , { useState } from 'react' ; import ItemsCarousel from 'react-items-carousel' ; export default ( ) => { const [ activeItemIndex , setActiveItemIndex ] = useState ( 0 ) ; const chevronWidth = 40 ; return ( < div xss=removed> < ItemsCarousel requestToChangeActive = { setActiveItemIndex } activeItemIndex = { activeItemIndex } numberOfCards = { 2 }
React学习之列表
Bruce_wjh的博客
09-02 693
说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-08文件夹下。 在本系列第二篇：React学习之元素渲染中，讲到了数组的渲染属于React的列表渲染；在JavaScript中，我们可以使用map()函数来遍历数组，然后得到新的列表： const numbers = []1,2,3]; const newNumbers = numbers.map(num =
react学习笔记 item1 --- 基础入门
诗渊的博客
11-13 996
React 是一个用于构建用户界面的 JAVASCRIPT 库，起源于 Facebook 的内部项目。本文对react进行了一个基本的介绍，给出了第一个简单的react示例。
react-reactqmap一个对腾讯web地图简单封装的React组件
08-15
react-qmap：一个对腾讯web地图简单封装的React组件
React系列知识——React基础
Smart_J_King的博客
01-18 838
React.js 使用起来相对更加灵活，用户可配置性更高；Vue.js 使用起来相对简洁，因为Vue 开放了许多API，但是因为诸多API在灵活性上被限制。 React开发环境准备 使用 React 的方式 1.通过<script>标签引入 .js 文件来使用 2.通过 create-react-app 脚手架工具 安装 npx npx create-react-app my-app npx 是 npm 5.2+ 及更高版本附带的包运行工具 npm npm init re
React 列表 & Keys
12-14
React 列表 & Keys 我们可以使用 我们可以将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，... const listItems = numbers.map((number) => {number} ); return ( {listItems} );
react-native-photo-grid ★31 - React Native 组件，处理构建照片网格的复杂性，每行照片数量灵活。
06-08
} componentDidMount() { // 构建一个包含 60 张照片的数组 let items = Array.apply(null, Array(60)).map((v, i) => { return { id: i, src: 'http:/ /placehold.it/200x200?text='+(i+1) } });this.
React学习笔记之列表渲染示例详解
01-19
前言 ...const listItems = numbers.map((number) => <li>{number} ); ReactDOM.render( <ul>{listItems}, document.getElementById('root') ); 基础列表组件的构造中，有一个重要的属性值key需
React中使用collections时key的重要性详解
12-04
大家应该都知道，在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered，下面话不多说，来一起看看详细的介绍： React 不会 render 重复的 keys 为了...
springboot-items-api
04-09
Spring Boot Items-API原型微服务 该项目旨在以强制性（非React性）方式使用Spring Boot和Spring Data作为CRUD原型。 它还旨在演示面向方面编程（AOP）在跟踪记录，数据库异常转换和基于注释的事件处理中的使用。 ...
jstl对Map的操作
langhua9527的专栏
11-27 662
[code="java"]//jstl对Map的操作 /**当forEach 的items属性中的表达式的值是java.util.Map时，则var中命名的变量的类型就是java.util.Map.Entry这时var=entry的话，用表达式${entry.key}取得键名。用表达式${entry.value}得到每个entry的值。这是因为java.util.Map.Entry对象有getK...
总结：react项目中使用地图——以腾讯地图为例
keep_dream的博客
04-28 4310
由于项目中需要用到地图展示，之前也没用到过地图展示，所以记录一下自己的探索过程，共同成长，互勉！ 需求1：根据地址中文或者经纬度在地图显示对应的坐标点。 需求2：搜索地址然后在地图上显示对应的大致路线。 需求3：根据地址跳转到本机安装的对应地图APP
react腾讯地图绘制路线，视图自适应定位到路线区域
最新发布
北鼻娃的博客
06-14 341
每次在页面查询获取最新路线，不会定位到当前路线的位置，官方api提供了fitBounds方法，大概就是根据所有点的位置找到所在的范围，然后适应它。发现这招不好使，因为路线的起点和终点可能离得很近，其实整个路线过程行驶的非常长，就会导致视图是定位到两个点，但是无法观察整个路线情况。最近遇到一个需求：前端在地图上绘制货车导航路线，调研后发现腾讯地图最便宜，公司采用了这个。把上面传入的点换成路线上所有点就可以啦。
react-native 调用原生module跳转第三方地图软件实现导航功能
jasonzds的博客
05-03 3951
之前做过android地图开发，在自己的APP里集成第三方的地图sdk(百度，高德，腾讯，搜狗等)，来实现导航，基于LBS周边搜索，定位，路线规划等功能需求，这种方法比较麻烦。同时还增加了app的体积，还有如果这个第三方地图软件的sdk更新了，那你自己的app还的做相应的更新，在react-native这种方法估计也可以，但是没去尝试，因为需求简单，就是实现导航，所以就用了接下来介绍这种方法，直接...
React click toggle
qq_34351732的博客
11-17 1025
<html> <head> <title>Document</title> <script src="../react.js"></script> <script src="../react-dom.js"></script> <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser
React 可控组件input
qq_34351732的博客
11-18 954
<script type="text/babel"> const MyForm = React.createClass({ getInitialState: () => ({ text: '' }), handleChange: function (e) { this.set
React function component
qq_34351732的博客
11-17 807
component capital letter, single object<html> <head> <title>Document</title> <script src="../react.js"></script> <script src="../react-dom.js"></script> <script src="http://cd
React email&&
qq_34351732的博客
11-18 798
<html> <head> <title>Document</title> <script src="../react.js"></script> <script src="../react-dom.js"></script> <!-- //引用资源，JSX转HTML --> <script src="http://cdn.bootcs
React array
qq_34351732的博客
11-14 548
Document <script type="text/babel"> const arr = ['a', 'b', 'c', 'd'] const HelloComponent = React.createClass({ render: () => <div>{ //只能放回
react map循环组件
04-25
React 中的 map 循环组件是用于遍历数组并返回新数组的方法。你可以使用 map 方法来动态生成 React 组件列表，并且每个组件都拥有相同的结构和属性，但根据遍历的数据而不同。遍历过程中，React 会自动更新元素并使...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值