欢迎您来到Ganace 的个人博客。
在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。
诚挚地向您问候一声:您好，朋友！
这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。
想要在自己的平淡无奇的人生长河中留下些什么，
或者只是为了拯救老人家岌岌可危的记忆力，
仅此而已。
来到此地，分享与你。
也期待与您的再次相遇！
有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com
欢迎您的来信！
又到了记笔记的时候了，这次是React.js的复习巩固笔记，温故知新。有空就一点点加内容。 React学习笔记:组件与入参
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 props ），并返回用于描述页面展示内容的 React 元素。
JavaScript 函数编写的 React 函数组件，它接收唯一带有数据的 props （代表属性）对象与并返回一个 React 元素function Hello(props) {
return <h1 className= {props.classname} >Hello, {props.name}</h1>;
}
ES6 的 class 来定义的 React 组件，这个组件和上面1中的组件是等效的class Hello extends React.Component {
render() {
return <h1 className= {props.classname} >Hello, {this.props.name}</h1>;
}
}
React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 props 。function Hello(props) {
return <h1 className= {props.classname} >Hello, {props.name}</h1>;
}
const element = <Hello name="Ganace" classname="title" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意：组件名称必须以大写字母开头。 React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。function Hello(props) {
return <h1 className= {props.classname} >Hello, {props.name}</h1>;
}
function Cpp() {
return (
<div>
<Hello name="Ganace" classname="title" />
<Hello name="Ganace" classname="title" />
<Hello name="Ganace" classname="title" />
</div>
);
}
ReactDOM.render(<Cpp />, document.getElementById('root'));
项目人、项目说明两个组件
function Cpp() {
return (
<div>
<div>
<h1>姓名：{props.user.name}</h1>
<h2>性别：{props.user.sex}</h2>
<h2>年龄：{props.user.age}</h2>
</div>
<div>
<h2>{props.project.title}项目说明</h2>
<a href= {props.project.url}>
<img src= {props.project.img} >
</a>
<p>{props.project.profiles}</p>
</div>
</div>
);
}
function User(props) {
return (
<div>
<h1>姓名：{props.user.name}</h1>
<h2>性别：{props.user.sex}</h2>
<h2>年龄：{props.user.age}</h2>
</div>
);
}
function Project(props) {
return (
<div>
<h2>{props.project.title} -项目说明</h2>
<a href= {props.project.url}>
<img src= {props.project.img} />
</a>
<p>{props.project.profiles}</p>
</div>
);
}
function Cpp(props) {
return (
<div>
<User user={props.user} />
<Project project={props.project} />
</div>
);
}