标签：function return 自定义 React props 组件 第二篇

非自定义组件

1、我们可以使用函数定义了一个组件：

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

2、你也可以使用 ES6 class 来定义一个组件:

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

自定义组件

const element = **<HelloMessage />** 

注意**
自定义组件作为标签引用时候首字母都是大写的

组件传值

对比记忆：在vue里面父组件给子组件传值也是用props传值。

//子组件
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 //定义了元素
const element = <HelloMessage name="Runoob"/>;
 //渲染的页面
ReactDOM.render(
//将React元素渲染到DOM节点中，也可以直接写<HelloMessage name="Runoob"/>进来
    element,
    document.getElementById('example')
);

复合组件

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}

function App() {
    return (
    <div>
        <Name name="复合组件/>
        <Url url="http://www.runoob.com" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

总结

主要是初次学习，对着文档来学的，感觉理解起来很简单，但之后肯定是要再跟视频项目实战的，感觉有些时候老师总结的会好一些，现在已经上班实习了，领导提了一嘴需要React，就要开始学了，看视频目标太大了，但是觉得看文档知识不够全面啊。唉~
组件肯定不会只有这么多东西的，后面继续学。！！加油铁子

标签：function,return,自定义,React,props,组件,第二篇
来源： https://blog.csdn.net/qq_43468165/article/details/115489212

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。