事件 - 样式 - 遍历

一 事件调用

1. onClick="{clickHandler}"

2. onClick="{()=>{

//内容

}}"

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

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);
  }
}

 

二 样式：

style={{
position: 'absolute',

}}　

三 遍历：

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


      </ul>

  四 三元表达式  

整体合部分

{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