2019.01.12杂七杂八

八叉树
784 阅读5分钟

多个if... if...语句和else if的区别

区别就是多个if是所有的if都会进行判断的，而if...else if是只要有满足条件的，就不在对之后的else if进行判断了。

//下面最终结果是c=3
a=2
if(a==1)
   c=1;
if(a==2)
   c=2;
if(a%2==0)
   c=3;

//下面最终结果是c=2
a=2;
if(a==1)
   c=1;
 else if(a==2)
   c=2;
 else if(a%2==0)
   c=3;

在项目中就遇到了使用多个if语句造成的错误，因为如果有多个if条件满足的话，后面的操作会覆盖前面的操作，所以要谨慎使用多个if语句啊，一般情况下，我们的意图都是满足某一情况剩下的条件就不用判断了，所以还是用else if最好。

React组件中获取DOM的方法

项目中遇到的一个需求：我们要判断用户点击的选项（答案）是否正确，并根据正确与否立即显示对号和错号来告诉用户他的答案的正确与否。这里的对号和错号分别是一张图片，所以这时候我们就要创建一个img要素或者对已有的img要素进行显示与隐藏，我们采用后者来实现。

<img id='result' ref='result' className='result' style={{display:'none'}}  />

初始状态img是不显示的，然后我们通过获取ID或者ref属性来获取到这个DOM节点，通过改变src来展示不同的图片（对号图片和错号图片）。

		document.getElementById('result').style.display = 'block';
        document.getElementById('result').src = wrongImg;
        setTimeout(function () {
                   document.getElementById('result').style.display = 'none';
                    }, 200);

总结：

在React组件中，我们可以通过以下三种方法来获取dom:

  • js常规dom操作方式。通过id获取dom

  • react原生函数findDOMNode获取dom

  • 通过ref来定位一个组件，注意ref要全局唯一

    React不太推荐或废弃了以上refs的用法，而是用ref callback

    _test = this._test;
console.log(_test.value);
<div>test: <input type="text" ref={ test => this._test = test } /></div>

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
class Index extends Component {
  onClick(event){
    console.log(event.target.value);
    // 第一种方式
    var submitObj = document.getElementById('submit');
    submitObj.style.color = 'green';
    // 第二种方式
    ReactDOM.findDOMNode(submitObj).style.color = 'yellow';
    // 第三种方式
    this.refs.submit.style.color = 'blue';
  }
  render(){
    return (
        <div>
          <input id='submit' ref='submit'
                 type='button' value='style'
                 onClick={this.onClick.bind(this)}/>
        </div>
    )
  }
}
ReactDOM.render(<Index/>,document.getElementById('container'));

注意this.refs.dom与ReactDOM.findDOMNode之间的区别，前者获取的是虚拟的DOM节点，后者获取的是真实DOM的节点。下面介绍下React.findDOMNode的用法：

var MyComponent = React.createClass({
  handleClick: function() {
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就指向这个虚拟 DOM 的子节点，最后通过 React.findDOMNode 方法获取真实 DOM 的节点。

需要注意的是，由于 React.findDOMNode 方法获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个方法，否则会返回 null 。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会调用 React.findDOMNode 方法。

css让图片或其他元素居中的通用方法

下面这种方法可以让图片同时水平垂直居中

//css
div{
    display:block;
    float:none;
    width:100%:
    /*posisiton:relative;*/
}
div img{
    display:block;
    width:100%;
    height:auto;
    margin:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}


//html
<div>
   <img src='./er.jpg />
</div>

如何设置li便签前面的圆点样式

一般li标签前面的圆点是一个小黑点，我想要丰富前面圆点的表现形式可以通过list-style-image属性来设置，导入一个图片/图标

<ul>
  <li style='list-style-image: url(../img/smile.gif)'>1</li>
  <li style='list-style-image: url(../img/cry.gif)'>1</li>
  <li style='list-style-image: url(../img/sad.gif)'>1</li>
</ul>

React中样式和图片的加载

在项目中之前用到了类似下面的方式来实现图片的加载，这种方式是错误的，是获取不到图片的

<div className="box1">
      <img src='./smile.jpg' />
 </div>

1、样式

样式是一个界面的展示问题的核心，在样式方面，react和一般的web网页的区别还是挺大的。

第一、在react中，不使用class属性来添加样式，而是使用className属性。

第二、在react中，它的内联对象是使用对象的方式来表达的，而一般的web网页的内联样式，是一个字符串。

示例如下：

//css
.colorRed{
    color: red;
}
//render函数中
render(){
    return ( 
        <div style={{background:'#000'}} className='colorRed'>
            mapbar_front
        </div>
    )
}

在这里，我们需要注意一个重要的点。style后面有两个大括号（外层大括号和内层大括号），外层大括号代表jsx语法，表示里面的东西要使用js的方式进行解析，而内层大括号代表了对象，就是使用了一个对象来表达样式。

关于对象的方式，我们可以写成下面的方式：

var styleObj = {
    width: '200px',
    height: '150px',
    color: 'red'
}
render(){
    return ( 
        <div style={styleObj} className='colorRed'>
            mapbar_front
        </div>
    )
}

2、图片

在react中，加载图片分为两种，一种是本地图片的加载，一种是网络图片的加载。

网络图片的加载

网络图片的加载，和一般的dom元素没有区别：

render(){
    return (
        <div>
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />
        </div>
    )
}

但是呢，图片一般是后台传过来的变量，我们一般用在jsx语法的{}中来表示。

//如果有一个src的state。
render(){
    return (
        <div>
            <img src={this.state.src} />
        </div>
    )
}
本地图片的加载

本地图片的加载的第一种方式——require

render(){
    return <div>
        <img src={require('../assets/logo.png')} />
    </div>
}

另一种方式就是import。

import img from '../assets/logo.png';
//render函数中
render(){
    return ( 
        <img src={img} />
    )
}
avatar
文章
阅读
粉丝