学React的第一天
非常喜欢
2023-07-20 23:08
阅读1722
创建项目
npx create-react-app my-app //my-app项目名
组件
编写
import React from 'react';
export default function HelloComponent (){
return (
<div>
HelloWord
</div>
);
}
/* 与上面导出方法作用相同
const WordComponent = () => {}
export default WordComponent
*/
引入
import React,{useState} from 'react';
import WordComponent from "./WordComponent";
export default function HelloComponent (){
return (
<div>
<WordComponent/>
</div>
);
}
传参
传递
import React from 'react';
import WordComponent from "./WordComponent";
export default function HelloComponent (){
return (
<div>
<WordComponent
person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
/>
</div>
);
}
person只能有一个值，所以需要用里边的{}
使用
import React from 'react';
export default function WordComponent({ person }) {
return (
<div>
{person.name}
{person.imageId}
</div>
)
};
注意函数的形参{ person }使用时，如果是对象，就必须直接用person. 的方式也可以使用const { name, imageId } = person
动态视图
import React,{useState} from 'react';
export default function HelloComponent (){
const [Hello, setHello] = useState('Hello')
const set = () => setHello('hello')
return (
<div>
{Hello}
<button onClick={set}>设置Hello</button>
</div>
);
}
useState 用来修改动态的值Hello是变量，setHello是函数，用来修改Hello 的值
样式
.word{
font-size: 100px;
}
外链
import React from 'react';
import "./Word.css"
export default function WordComponent() {
return (
<div className='word'>
Word
</div>
)
};
通过className设置div 的类名，直接引入样式即可
行内
import React from 'react';
export default function WordComponent({ person }) {
const Style = {
fontSize: '20px'
}
return (
<div className='word' style={Style}>
Word
</div>
)
};
评论
问答助学
相关内容
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
作者分享
租房
15
第二天（类组件）(生命周期)
10
vscode写vue的时候都拥有什么插件好用呀，特别是代码格式，总是出错，没法按快捷键格式化
5
鱼友们，新网站上线了( https://github.com/huoshicang/chatgpt-3
)欢迎大家来提出建议#项目# #前端#
5
关于编程导航的markdown编辑器，有一个基于vue开发的，并且支持vue3，不仅仅可以渲染markdown文本，还可以渲染html标签，支持代码高亮、图片上传及宽高目录导航等，还有其他的，一个链接( https://code-farmer-i.github.io/vue-markdown-editor/zh/ )有兴趣的看一看
4
