React18入门到精通教程

2023-02-21 10:01:52
2024-07-21 21:25:51

JSX实现列表渲染

js 复制代码
const songs = [
  { id: 1, name: "helo1" },
  { id: 2, name: "helo2" },
  { id: 3, name: "helo3" },
];
function App() {
  return (
    <div>
      {songs.map((obj) => {
        return (
          <li>
            {obj.id}-{obj.name}
          </li>
        );
      })}
    </div>
  );
}

JSX实现条件渲染

简单逻辑 - 三元表达式,逻辑&&运算

js 复制代码
{flag?  (<div>flag is true</div>): (<div>flag is false</div>)}
js 复制代码
{ true && <span>this is span</span>}

复杂逻辑 - 自定义函数并调用

js 复制代码
function type(t){
    switch t:{
        case '1': return (<div>hi 1</div>);
        case '2': return (<div>hi 2</div>);
        case '3': return (<div>hi 3</div>);
    }
}
//调用函数
function App(){
    return <div>{type(1)}</div>
}

JSX行内样式

直接写

js 复制代码
function App(){
    return (<div style={{color:'red'}}>hello</div>)
}

用类表达

js 复制代码
const obj={
    color:"red",
}
function App(){
    return (<div style={ obj } >hello jsx</div>)
}

使用类名 className='' + import './xxx.css'
动态类名

js 复制代码
const title=true;
​
function App(){
    return (
        <div className={showTitle ? 'title' : ''}></div>
    )
}
目录
暂无评论,欢迎留下你的评论

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额