小白龙博客 | 小白龙博客

React18入门到精通教程

2023-02-21 18:01:52

2025-01-02 04:42:29

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

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

暂无评论，欢迎留下你的评论