使用create-react-app方式引入antd样式
由于create-react-app构建React App的方式推荐zero-configuration(零配置),所以只能通过 npm run eject 的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。
安装完 antd , 默认所有的组件都会被引入,那项目将会变得很庞大,antd提供了按需加载的方式
引入方法:进入create-react-app目录,然后npm install antd
标签
虽然 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找
片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。
a标签
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
rel标签
定义和用法
标签的 rel 属性用于指定当前文档与被链接文档的关系。
用于 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系,而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 标签中同时使用。
翻译:collapse-崩溃
animation表示动画(css3中的属性)
定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。
默认值: none 0 ease 0 1 normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animation=“mymove 5s infinite”
语法
animation: name duration timing-function delay iteration-count direction;
值与对应描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
meta标签
定义和用法
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。@keyframes
定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 描述
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。
例如:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
或者
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
翻译:infiinate-线性
noscript标签
定义和用法
noscript 元素用来定义在脚本未被执行时的替代内容(文本)。
此标签可被用于可识别
提示和注释:
注释:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。
注释:无法识别
单页面显示
就是多个页面放在一个页面显示
antd中组件button的部分使用
首先要引入antd:
在js中和css中都要引用
翻译:dashed-虚线
primary-主要的
mount:安装
node:节点
antd中input组件的基础使用
ReactDOM.render( ______, mountNode);
______上填:<Input placeholder=“随便填” /
再加一个>
form表单
Form表单定义
具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
我们为 form 提供了以下三种排列方式:
水平排列:标签和表单控件水平排列;(默认)
垂直排列:标签和表单控件上下垂直排列;
行内排列:表单项水平行内排列。
组件传值
state={
test:‘test’,
}
render() {
const { test } = this.state;
this.setState({
test: ‘hello’
})
<Test test1={test}
加/>
const { test1 } = this.props;