荆州做网站的公司,今天国际新闻最新消息10条,在线生成短链接,宣传片制作拍摄组件
React的组件就是一个js函数#xff0c;函数内部return一个由jsx语法创建的html代码片段。
//MyComp.js
export default function MyComp(){return (h1我是新组件MyComp/h1)
} 在需要引入组件的地方import导入组件#xff0c;并放在相应位置
//App.js…组件
React的组件就是一个js函数函数内部return一个由jsx语法创建的html代码片段。
//MyComp.js
export default function MyComp(){return (h1我是新组件MyComp/h1)
} 在需要引入组件的地方import导入组件并放在相应位置
//App.js
import MyComp from ./components/MyComp
function App() {return (div classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /p编辑 codesrc/App.js/code 并且重新加载/paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a//新组件MyComp/MyComp/header/div);
}export default App;需要注意的地方
组件名称首字母必须大写如果return的内容太大不能与return 处于同一行则需要对return的内容添加小括号
JSX规则
要从组件返回多个元素使用一个父标签封装他们。如果你不想在标记中额外添加div可以使用/JSX要求标记被显示闭合像这样的自闭标签一定要写成想这样的环绕标签一定要写成驼峰式大多数东西。比如class要命名成className
JSX中使用大括号
js中的变量可以通过{}的方式传入JSX中从而使html中渲染的数据可以得到控制。任何 JavaScript 表达式都可以在大括号之间工作包括像 formatDate() 这样的函数调用
export default function TodoList() {const name Gregorio Y. Zara;return (h1{name}s To Do List/h1);
}
//函数调用
const today new Date();function formatDate(date) {return new Intl.DateTimeFormat(en-US,{ weekday: long }).format(date);
}export default function TodoList() {return (h1To Do List for {formatDate(today)}/h1);
}何处使用{}
作为文本 直接在 JSX 标签内div{name}s To Do List\./div有效但{tag}Gregorio Y. Zaras To Do List/{tag}无效。作为属性 紧跟在 符号之后 src{avatar} 将读取 avatar 变量但 src“{avatar}” 将传递字符串 “{avatar}”。
使用双大括号
除了字符串、数字和其他js表达式外甚至可以在jsx中插入对象。在jsx中插入对象必须将对象封装在另一个对大括号中。person{{name:henry,age:22}} 一般在插入内联样式的时候会用到双大括号
export default function TodoList() {return (ul style{{backgroundColor: black,color: pink}}liImprove the videophone/liliPrepare aeronautics lectures/liliWork on the alcohol-fuelled engine/li/ul);传递属性
React通过传递属性props相互通信。每个父组件都可以通过给他们属性将一些信息传递给他们的子组件
第一步 将属性传递给子组件
首先在父组件中给子组件添加属性
export default function Profile() {return (Avatarperson{{ name: Lin Lanying, imageId: 1bX5QH6 }}size{100}/);
}第二步 子组件读取属性
function Avatar({ person, size }) {// person and size are available here
}默认属性
可以在接受时为属性添加默认值
function Avatar({ person, size 100 }) {// ...
}使用JSX的展开语法转发属性
当组件需要把自身接受到的属性转发给子组件时可用展开语法精简代码
function Profile({ person, size, isSepia, thickBorder }) {return (div classNamecardAvatarperson{person}size{size}isSepia{isSepia}thickBorder{thickBorder}//div);
}简化后
function Profile(props) {return (div classNamecardAvatar {...props} //div);
}传递JSX
可以把组件作为prop参数传递父组件通过{children}来接收类似于vue的slot
import Avatar from ./Avatar.js;function Card({ children }) {return (div classNamecard{children}/div);
}export default function Profile() {return (CardAvatarsize{100}person{{ name: Katsuko Saruhashi,imageId: YfeOqp2}}//Card);
}条件渲染
通过if判断渲染
通过变量来控制返回的jsx
if (isPacked) {return li classNameitem{name} ✔/li;
}
return li classNameitem{name}/li;条件三元运算符 (? : )
还可以用更简洁的三元运算符进行条件渲染
return (li classNameitem{isPacked ? name ✔ : name}/li
);逻辑与运算符
当你想在条件为真时渲染一些jsx或者什么也不渲染可以使用“”
return (li classNameitem{name} {isPacked ✔}/li
);渲染列表
可以通过js数组的filter() 和 map() 来过滤数据数组并将其转换为组件数组。
从数组中渲染组件
const people [Creola Katherine Johnson: mathematician,Mario José Molina-Pasquel Henríquez: chemist,Mohammad Abdus Salam: physicist,Percy Lavon Julian: chemist,Subrahmanyan Chandrasekhar: astrophysicist
];export default function List() {const listItems people.map(person li{person}/li);return ul{listItems}/ul;
}通过filter()方法过滤条目数组
const people [{id: 0,name: Creola Katherine Johnson,profession: mathematician,
}, {id: 1,name: Mario José Molina-Pasquel Henríquez,profession: chemist,
}, {id: 2,name: Mohammad Abdus Salam,profession: physicist,
}, {name: Percy Lavon Julian,profession: chemist,
}, {name: Subrahmanyan Chandrasekhar,profession: astrophysicist,
}];
export default function List() {const chemists people.filter(person person.profession chemist);const listItems chemists.map(person liimgsrc{getImageUrl(person)}alt{person.name}/pb{person.name}:/b{ person.profession }known for {person.accomplishment}/p/li);return ul{listItems}/ul;
}响应事件
在组件内定义事件响应函数并把函数作为属性值传递到JSX上
export default function Button() {function handleClick() {alert(You clicked me!);}return (button onClick{handleClick}Click me/button);
}也可以直接在JSX中内联事件
button onClick{function handleClick() {alert(You clicked me!);
}}状态组件的内存
组件内需要存储的数据叫做状态。状态相当于组件的内存存放着需要记忆的数据。
使用useState()
import { useState } from react;创建state使用useState()来创建他需要给定一个初始值作为参数。创建一个数组来接收这个状态这个数组包含一个state的名称和一个修改这个state的方法。
const [isSent, setIsSent] useState(false);
const [message, setMessage] useState(Hi!);修改state的值
state的值不能直接修改需要借用useState提供的第二个参数。
setIsSent(true);setXXX()方法会触发React进行重新渲染。
将state中的引用类型视为只读
如果state的值是数组或者对象那么使用setXXX()方法修改时就不能直接修改原值而是需要重新创建一份赋给state
对象
修改对象一般通过扩展运算符、Object.assign()等方法来复制原对象然后重新赋值给state
export default function Form() {const [person, setPerson] useState({firstName: Barbara,lastName: Hepworth,email: bhepworthsculpture.com});function handleFirstNameChange(e) {setPerson({//通过扩展运算符复制一份原对象给新对象再赋值给state...person,firstName: e.target.value});}数组
修改数组一般通过map()、filter()、slice()等方法复制一份新数组再赋值给state
import { useState } from react;let nextId 0;export default function List() {const [name, setName] useState();const [artists, setArtists] useState([]);return (h1Inspiring sculptors:/h1inputvalue{name}onChange{e setName(e.target.value)}/button onClick{() {setArtists([...artists,{ id: nextId, name: name }]);}}Add/buttonul{artists.map(artist (li key{artist.id}{artist.name}/li))}/ul/);
}Immer插件
如果对象或数组有深层嵌套用普通的复制方法比较复杂使用immer插件可以简化操作。它可以让你像修改原数组那样直接修改对象的属性或数组中的某项值但其实他在内部已经帮你创建了一个副本并赋予state 步骤
运行 npm install use-immer 以将 Immer 添加为依赖然后用 import { useImmer } from ‘use-immer’ 替换 import { useState } from ‘react’
使用方法
import { useImmer } from use-immer;export default function Form() {const [person, updatePerson] useImmer({name: Niki de Saint Phalle,artwork: {title: Blue Nana,city: Hamburg,image: https://i.imgur.com/Sd1AgUOm.jpg,}});function handleNameChange(e) {updatePerson(draft {draft.name e.target.value;});}function handleTitleChange(e) {updatePerson(draft {draft.artwork.title e.target.value;});}
