React关于组件的定义

最新推荐文章于 2024-07-23 14:23:49 发布

雾漫

最新推荐文章于 2024-07-23 14:23:49 发布

阅读量161

点赞数

分类专栏： React 文章标签： React自定义组件 React复合组件

本文链接：https://blog.csdn.net/weixin_43532346/article/details/85116303

版权

React 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

定义组件方式
使用函数定义一个组件或者使用ES6 class来定义一个组件。

//使用函数定义一个组件
function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

//使用ES class定义一个组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

const element = 为用户自定义的组件。

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

如果我们需要向组件传递参数，可以使用 this.props 对象

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;{/* name 属性通过 props.name 来获取*/}
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

复合组件
通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="菜鸟教程" />
        <Url url="http://www.runoob.com" />
        <Nickname nickname="Runoob" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);