vue转react问题汇总
一、添加样式
<img className="avatar" /> // 或者 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 className="avatar" 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、Object
import { 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])删除（filter）
setList(list.filter(item => item.id !== 2))修改某一项（map）
setList(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 type="text" value={inputVal} onChange={(e) => setInputVal(e.target.value)} placeholder="输入要传给父组件的内容" /> <button onClick={sendToParent}>点击传给父组件</button> </div> ); } export default Child;
- 父传子：父组件把数据写在子组件标签上，子组件用
props接收- 子传父：父组件把函数传给子组件，子组件调用函数并传参
总结
- 父 → 子：
props直接传数据- 子 → 父：父传回调函数，子调用函数传参
- props 只读，子组件不能修改父组件的数据，只能通过回调通知父组件修改