分类目录归档:Css/Html

改变create-react-app默认端口

ReactJS: Changing Default Port 3000 in create-react-app

总共有三种方法

  1. 配置全局变量
  2. 配置 package 文件
  3. 创建 .env

1)配置全局变量

export PORT=8000

2) 配置 package 文件

…
"scripts": {
"start": “PORT=8000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
…

3.创建 .env

PORT=8000

参考

ReactJS: Changing Default Port 3000 in create-react-app

react中不使用bind

Losing bind(this) in react.md

普通的写法

import React, { Component } from "react";

class ButtonWithBind extends Component {
constructor() {
super();

this.state = { toggle: false };
}

toggleButton() {
this.setState(prevState => ({ toggle: !prevState.toggle }));
}

render() {
const toggle = this.state.toggle;

return (
<div>
        <button onclick="{this.toggleButton}">
{toggle ? "ON" : "OFF"}
</button></div>
);
}
}

export default ButtonWithBind;

如果这个时候你点击这个按钮,会出现一个错误,表示这个 toggleButton函数没有定于。

我们可以通过在toggleButton 上绑定 this 来修复这个问题

this.toggleButton = this.toggleButton.bind(this);
import React, { Component } from "react";
class ButtonWithBind extends Component {
constructor() {
super();
this.state = { toggle: false };
this.toggleButton = this.toggleButton.bind(this);
}
render() {
const toggle = this.state.toggle;
return (
<div>
        <button onclick="{this.toggleButton}">
{toggle ? "ON" : "OFF"}
</button></div>
);
}
toggleButton() {
this.setState(prevState => ({ toggle: !prevState.toggle }));
}
}
export default ButtonWithBind;

拯救写法

toggleButton = () => {
this.setState(prevState => ({ toggle: !prevState.toggle }));
}

是不是非常的熟悉?

使用箭头函数能够直接指向他的上下文。这样就不用使用.bind(this)了

import React, { Component } from "react";
class ButtonWithoutBind extends Component {
constructor() {
super();
this.state = { toggle: false };
}
render() {
const toggle = this.state.toggle;
return (
<div>
        <button onclick="{this.toggleButton}">
{toggle ? "ON" : "OFF"}
</button></div>
);
}
toggleButton = () => {
this.setState(prevState => ({ toggle: !prevState.toggle }));
}
}

除了上述写法,其实也可以在render中使用一个箭头函数来拯救你的.bind(this)

import React, { Component } from "react";
class ButtonWithBind extends Component {
constructor() {
super();
this.state = { toggle: false };
// this.toggleButton = this.toggleButton.bind(this);
}
render() {
const toggle = this.state.toggle;
return (
<div>
        <button onclick="{()=">{this.toggleButton()}}>
{toggle ? "ON" : "OFF"}
</button></div>
);
}
toggleButton() {
this.setState(prevState => ({ toggle: !prevState.toggle }));
}
}
export default ButtonWithBind;

通过<button onclick="{()=">{this.toggleButton()}}&gt;这里新生成一个匿名函数直接调用,作用域的this还是正确的

References

Losing .bind(this) in React

float元素设置高度

方案一

在浮动元素下面加一个清除浮动的元素:div{clear:both}

html

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div

css

.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

方案二

将父元素也设置为浮动的

html

<div style="float: left;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

方案三

为父元素显式的设置高度,不推荐

html

<div style="height: 400px;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

方案四

为父元素加入overflow:hidded属性或者overflow:auto属性

html

<div style="overflow: hidden;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

上面四种方案,方案一比较靠谱,兼容性最强

转载地址:https://segmentfault.com/q/1010000005958273

flex 布局

flex 布局

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

基本概念

flex布局元素分为:容器(flex container) 与 项目(flex item)

容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

项目属性

order
flex-grow   // 默认 0
flex-shrink // 默认 1
flex-basis
flex
align-self

其中 flex 有三个属性

flex | |

flex布局

See the Pen grid layout by chris (@isevenfox) on CodePen.

css 画图形

css画图形

1.css画实心三角形

原理:

先画一个最简单正方形

高、宽都为10px

然后为他加上边框也为10px

这个时候你就会发现,他变成了一个梯形

假如需要画一个向下的实心尖头,那么就先将梯形的右,下,左边框隐藏。然后就得到一个等腰梯形

这个等腰梯形的宽和高还是为10px,如果想要变成尖的三角形,那么就是直接去掉高和宽

具体实现看如下的 codepen

##2.画空心箭头

原理:

1.先画一个正方形,然后将正方形旋转45度,最后隐藏其他边框

具体实现看如下的 codepen

See the Pen css draw by chris (@isevenfox) on CodePen.