React的组件及渲染

最新推荐文章于 2024-10-16 17:29:59 发布

King's Blog

最新推荐文章于 2024-10-16 17:29:59 发布

阅读量459

点赞数

CC 4.0 BY-SA版权

分类专栏： React React学习日志

本文链接：https://blog.youkuaiyun.com/weixin_42566993/article/details/100055880

React学习日志同时被 2 个专栏收录

26 篇文章

订阅专栏

React

21 篇文章

订阅专栏

本文深入探讨了React中组件的定义方式，包括函数组件和类组件的创建，以及如何通过props进行组件间的数据传递。同时，讲解了基本渲染、列表渲染和条件渲染的实现方法，展示了如何使用ReactDOM.render()将React元素渲染到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

组件的定义

使用函数定义一个组件，组件名必须大写

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}

使用ES6 class定义一个组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

自定义组件

const element = <HelloMessage name="hello" />

通过ReactDOM.render() 的方法来将React元素渲染到页面上：
自定义组件中的name属性通过props.name来获取
在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor，这是因为 class 和 for 是 JavaScript 的保留字。

渲染

基本渲染
将变量的值直接显示在页面上

function MyCom(props){
    let msg = "hello";
    return <h3>{msg}</h3>;
}

列表渲染
设置key属性确定唯一标识

<ul>
    {
        arr.map((item,index)=>{
            return <li key={index}>{item}</li>
        })
    }
</ul>

条件渲染

function UserInfo(props){
    let {user} = props;
    if(user){
        return <h2>{user.name} 已登录</h2>
    }
    return <h2>请登录</h2>
}
ReactDOM.render(<UserInfo user={{name:'zhangsan'}}/>,document.getElementById('app'));

组件传值

传递字符串需要将字符串直接作为属性值进行传递，如果是要传递其他数据类型，需要将值放入到{}中进行传递

传递字符串
<MyComponent foo='this is foo' />=>this is foo
传递数字
<MyComponent foo={1,2,3} />=>3
传递布尔类型
<MyComponent foo={true} />不显示
传递数组
<MyComponent foo={[1,2,3,4]} />=>1234
传递对象
<MyComponent foo={{name: 'terry' }} />=>terry

类组件

可以通过ES6中的类来创建组件，该类继承React.Component，并且拥有一个render()函数
render函数表示渲染，每次重新渲染都要调用该函数

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!{this.props.name}</h1>;
  }
}

Fragment

Fragment 允许将子列表分组，而无需向 DOM 添加额外节点。

return (
    <React.Fragment>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </React.Fragment>
);