react入门笔记

1.JSX的用法

1. function App(){
3. let msg = 'react 的插值';
5. return (
6. <div>{msg}</div>
7. )
8. }

复制代码

jsx中也可以绑定属性，绑定属性时不能加引号

1. function App(){
2.     let url= 'https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg';
3.     return (
4.         <div>
5.             <img src={url} />
6.         </div>
7.     )
8. }

复制代码

jsx中也支持一些简单的js运算， 也支持条件运算符（react 的条件渲染方式之一

1. function App(){
2.     let count = 10;
3.     return (
4.         <div>
5.            <p>{ 1 + 1}</p>
6.            <h2>{count * 10}</h2>
7.         </div>
8.     )
9. }

复制代码

jsx中也可以利用es6的模板字符串, 支持字符串拼接操纵

1. function App(){
2.     let count = 10;
3.     let msg = '新的一年';
4.     return (
5.         <div>
6.            <p>{`${count} hello`}</p>  
7.            <p>{msg + '美妙人生'}</p>        
8.         </div>
9.     )
10. }

复制代码

在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里利用JSX，将它赋值给变量，看成参数传入，作为返回值都是答应的：

1. function App(){
2.     let count = 10;
3.     let ele ;
4.     // 变相的react的条件渲染
5.     if(count > 10){
6.         ele = (<h1>《哪吒2》</h2>)
7.     }else {
8.         ele = <p>《唐探1900》</p>
9.     }
11.     return (
12.         <div>
13.             {ele}
14.         </div>
15.     )
16. }

复制代码

2.react的条件渲染

React 没有特殊的语法来编写条件语句，因此你利用的就是普通的 JavaScript 代码。比方利用 if 语句根据条件引入 JSX： if语句工作与JSX的外部， 即函数式组件的顶层作用域中， return 返回的模板就是jsx语法

1. function App(){
2.     let content;
3.     if (isLoggedIn) {
4.       content = <AdminPanel />;
5.     } else {
6.       content = <LoginForm />;
7.     }
8.     return (
9.       <div>
10.         {content}
11.       </div>
12.     );
13. }

复制代码

假如你喜欢更为紧凑的代码，可以利用 条件 ? 运算符。与 if 差别的是，它工作于 JSX 内部：

1. function App(){
2.     return (<div>
3.           {isLoggedIn ? (
4.             <AdminPanel />
5.           ) : (
6.             <LoginForm />
7.           )}
8.         </div>)
9. }

复制代码

当你不必要 else 分支时，你还可以利用 逻辑 && 语法：

1. function App(){
2.     let isLoggedIn  = true;
3.     return (
4.         <div>
5.           {isLoggedIn && <AdminPanel />}
6.         </div>
7.     )
8. }

复制代码

3.react的列表渲染

React 中的列表渲染推荐利用的是数组的map() 方法; react中列表渲染也必要绑定key值；
对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据，好比数据库中的 ID。假如你在后续插入、删除或重新排序这些项目，React 将依赖你提供的 key 来思考发生了什么。
利用 map() 函数将这个数组转换为 <标签名> 标签构成的html结构:

1. function App(){
2.   const products = [
3.       { title: 'Cabbage', id: 1 },
4.       { title: 'Garlic', id: 2 },
5.       { title: 'Apple', id: 3 },
6.     ];
7.    const listItems = products.map(product =>
8.       <li key={product.id}>
9.         {product.title}
10.       </li>
11.     );   
12.    
13.     return (
14.         <ul>{listItems }</ul>
15.     )
16. }

复制代码

也可以直接在jsx中利用map()方法举行渲染

1. function App(){   
2.     const products = [
3.       { title: 'Cabbage', id: 1 },
4.       { title: 'Garlic', id: 2 },
5.       { title: 'Apple', id: 3 },
6.     ];
7.     return (
8.         <ul>
9.         {
10.             products.map(product =>
11.               <li key={product.id}>
12.                 {product.title}
13.               </li>
14.             );   
15.          }
16.          </ul>
17.     )
18. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。