js react 笔记 2

本文主要是介绍js react 笔记 2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

起因， 目的:

记录一些 js, react, css

1. 生成一个随机的 uuid

// 需要先安装 crypto 模块
const { randomUUID } = require('crypto');const uuid = randomUUID();
console.log(uuid); // 输出类似  '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'  

2. 使用 props, 传递参数

• props 是一个缩写，代表 “properties”（属性）
• 用于组件之间传递数据，从父组件传递到子组件
• 我的理解， 就是函数的参数！
• React 组件函数接受一个参数，一个 props 对象
• 以下2种写法，是一样的。

// 假设 父组件中传递的参数是:
// <TodoInput aa={aa} bb={bb} cc={cc} />// 写法 1， 显式使用 props, 然后解构， 解包！
function TodoInput(props) {const { aa, bb, cc } = props...
}// 写法2， 用大括号把这些参数都包起来。 
function TodoInput({ aa, bb, cc }) {...
}

3. js 展开运算符

const newTodoList = […todos, newTodo];

1. 创建一个新的数组 newTodoList，
2. 它首先复制了 todos 数组中的所有元素，
3. 然后将 newTodo 这个新元素添加到这个新数组的末尾。

4. 其他

1. react 给标签添加 css

style={{ backgroundColor: ‘black’, }}
backgroundColor 驼峰式写法

2. 使用 map 函数来渲染数组

const listItems = people.map(person => <li>{person}</li> );

3. 使用 filter 函数来过滤数组

const chemists = people.filter(person => person.profession === ‘化学家’ );

4. 如果箭头函数 => 后面有 {}, 那么必须使用 return, 否则可以省略 return

走过路过，支持一下啊。

这篇关于js react 笔记 2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---