react学习(46)----react渲染组件

原创于 2021-07-16 20:41:07 发布

· 270 阅读

0 ·

版权

React 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了React中元素的使用，包括基本HTML元素和用户自定义组件。当React元素是自定义组件时，它会将JSX的属性转化为props传递给组件。以`<Welcome name=Sara />`为例，`Welcom`组件接收到`name`属性，并在页面上渲染出`Hello, Sara`。这个过程展示了React如何通过props在组件间传递数据。

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

const element = <div />;

不过，React 元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例如，这段代码会在页面上渲染 “Hello, Sara”：

function Welcome(props) {  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;ReactDOM.render(
  element,
  document.getElementById('root')
);