vue转react问题汇总

一、添加样式img classNameavatar / // 或者 const className avatar function Header() { return div className{className} 1 /div }二、回显数据const user { name: Hedy Lamarr, imageUrl: https://i.imgur.com/yXOvdOSs.jpg, imageSize: 90, }; export default function Profile() { return ( h1{user.name}/h1 img classNameavatar src{user.imageUrl} alt{Photo of user.name} style{{ width: user.imageSize, height: user.imageSize }} / / ); }在上面示例中style{{}} 并不是一个特殊的语法而是 style{ } JSX 大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时你可以使用 style 属性。三、条件渲染let content; if (isLoggedIn) { content AdminPanel /; } else { content LoginForm /; } return ( div {content} /div );简单些div {isLoggedIn ? ( AdminPanel / ) : ( LoginForm / )} /div // 当你不需要 else 分支时你也可以使用更简短的 逻辑 语法 div {isLoggedIn AdminPanel /} /div四、渲染列表const products [ { title: Cabbage, id: 1 }, { title: Garlic, id: 2 }, { title: Apple, id: 3 }, ]; const listItems products.map(product li key{product.id} {product.title} /li ); function Header() { return ( ul{listItems}/ul ); } // 或者 // 两种写法无区别上面更清晰 // 必须添加key属性 export default function TodoHeader() { return ( {products .map((item, i) { return ( div key{item.id}{item.title}/div ) })} / ) }五、事件绑定响应式1、普通类型export default function TodoHeader() { const [count, setCount] useState(0); function handleChangeCount() { setCount(count 1) } return button onClick{handleChangeCount} {count} /button }2、Objectimport { useState } from react; function App() { const [count, setCount] useState({ value: 1 }); function handleChangeCount() { setCount({ value: count.value 1 }); } return ( div h1{count.value}/h1 button onClick{handleChangeCount}1/button /div ); } export default App;3、Array新增const [list, setList] useState([1,2,3]) // 1、 新增 arr.push(xxx) // 错误不会更新 // 正确 const [list, setList] useState([1,2,3]) // 后面加 setList([...list, 4]) // 前面加 setList([4, ...list])删除filtersetList(list.filter(item item.id ! 2))修改某一项mapsetList(list.map(item item.id 1 ? { ...item, name: 新名字 } : item ))清空 / 重置setList([])// 父组件 Parent.jsx import { useState } from react; import Child from ./Child; function Parent() { const [childMsg, setChildMsg] useState(); // 1. 父组件定义接收子组件数据的函数 const getChildData (data) { console.log(收到子组件数据, data); setChildMsg(data); // 更新父组件状态 }; return ( div h2父组件/h2 p子组件传来的数据{childMsg}/p {/* 2. 把函数传给子组件 */} Child sendData{getChildData} / /div ); } export default Parent;// 子组件 Child.jsx import { useState } from react; function Child({ sendData,childMsg }) { const [inputVal, setInputVal] useState(); // 3. 子组件调用父组件传递的函数传参 const sendToParent () { sendData(inputVal); // 把输入框的值传给父组件 }; return ( div h3子组件/h3 input typetext value{inputVal} onChange{(e) setInputVal(e.target.value)} placeholder输入要传给父组件的内容 / button onClick{sendToParent}点击传给父组件/button /div ); } export default Child;父传子父组件把数据写在子组件标签上子组件用props接收子传父父组件把函数传给子组件子组件调用函数并传参总结父 → 子props直接传数据子 → 父父传回调函数子调用函数传参props 只读子组件不能修改父组件的数据只能通过回调通知父组件修改