事件 - 样式 - 遍历

一 事件调用

1. onClick="{clickHandler}"

2. onClick="{()=>{

//内容

}}"

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(true)}   onClick  onChange   <input value={text} onChange={e => setText(e.target.value)}     //删除   setTasks( tasks.filter(t => t.id !== taskId) );

　　

把类似的，逻辑上属于一类的归为 switch

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function tasksReducer(tasks, action) {   if (action.type === 'added') {     return [...tasks, {       id: action.id,       text: action.text,       done: false     }];   } else if (action.type === 'changed') {     return tasks.map(t => {       if (t.id === action.task.id) {         return action.task;       } else {         return t;       }     });   } else if (action.type === 'deleted') {     return tasks.filter(t => t.id !== action.id);   } else {     throw Error('Unknown action: ' + action.type);   } }

 

二 样式：

?

1 2 3 4

style={{ position: 'absolute',   }}

三 遍历：

?

1 2 3 4 5 6 7

<ul>         {artists.map(artist => (           <li key={artist.id}>{artist.name}</li>         ))}           </ul>

  四 三元表达式  

整体合部分

?

1 2 3 4 5 6 7

{isPaused?(<p>123</p>):(<Counter/>)}   {isFancy ? (<div><Counter isFancy={true} /></div>) : ( <section> <Counter isFancy={false} /> </section> )}

　参考自：https://www.ruanyifeng.com/blog/2015/03/react.html　

?

1