dom上样式 react_react 创建dom元素 样式 - CSDN
  • 1、在dom中直接使用三目运算动态改变style,react是动态渲染组件的,所以可以做到实时更新 <div className={this.state.flag?'style1':'style2'}></div> 2、使用ref获取dom <div ref={e => ...

    1、在dom中直接使用三目运算动态改变style,react是动态渲染组件的,所以可以做到实时更新 

    <div className={this.state.flag?'style1':'style2'}></div>

    2、使用ref获取dom

    <div ref={e => (this.dom1 = e)}></div>
    const top = this.dom1.style.top;

     

    展开全文
  • react-router-dom基本使用

    2019-07-10 09:18:38
    包括: react-router、react-router-domreact-router-native react-router,只实现了路由的核心功能 react-router-dom,基于react-router,加入了一些浏览器运行环境下的一些功能 ,例如...

    介绍

    在react项目开发过程中经常会遇到,页面跳转之类的路由相关事件,为了更好的处理这些需要运用到react路由相关的一些包。
    包括: react-routerreact-router-domreact-router-native

    • react-router,只实现了路由的核心功能
    • react-router-dom,基于react-router,加入了一些浏览器运行环境下的一些功能
      ,例如:Link组件,会渲染一个a标签。BrowserRouter和HashRouter组件,前者使
      用pushState和popState事件构建路由,后者使用window.location.hash和
      hashchange事件构建路由。
    • react-router-native,基于react-router,类似react-router-dom,加入了
      react-native运行环境下的一些功能。

    本文主要介绍react在SPA web开发中的路由,即使用react-router-dom解决的路由问题。

    react-router-dom快速使用

    首先在SPA web开发中,需要进行路由于页面匹配,即需要让页面与地址一一匹配起来。

    import React, {Component} from 'react';
    import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
    import Home from './pages/Home/Home';
    import About from './pages/About/About';
    import ErrorPage from './pages/ErrorPage/ErrorPage'; //相当于404页面 
    class App extends Component {
    	render(){
    		return (
    			<Router>
    				<Switch>
    					<Route path='/' component={Home} exact>
    					<Route path='/about' component={About}>
    					<Route component={ErrorPage}>
    				</Switch>
    			</Router>
    		);
    	}
    }
    export default App;
    

    其中,Route对应的就是页面,其中的path属性对应的时地址。如:http://localhost:3000时会显示Home页面,当访问http://localhost:3000/about时会访问About页面。其中的exact为严格匹配,即未添加该属性时,无论访问http://localhost:3000还是http://localhost:3000/about都会展示出Home页面内容。

    可能还需要使用到导航栏

    如在Home页面中存在导航栏

    import React, {Component} from 'react';
    import {NavLink} from 'react-router-dom';
    import Style from './Home.module.css'; //在create-react-app创建的项目中这个代表css模块化,即当前css无论如何命名均不影响其他地方相同名称的结构的样式。
    class Home extends Component {
    	render(){
    		return (
    			<div>
    				<NavLink
    					to='/'
    					className={Style.navLink}
    	                activeClassName={Style.active}
                    >
    	                首页
    				</NavLink>
    				<NavLink to='/about' className={Style.navLink}>
    					关于
    				</NavLink>
    			</div>
    		);
    	}
    }
    export default Home;
    

    NavLink,用于设置导航链接,其中的activeClassName属性用于设置激活时匹配的样式

    需要使用到普通的链接跳转

    普通链接跳转直接使用Link组件,或者a标签

    import React, {Component} from 'react';
    import {Link} from 'react-router-dom';
    class Test extends Component {
    	render (){
    		return (
    			<div>
    				<Link to='/test'>Link跳转</Link>
    				<a href='/test'>a标签跳转</a>
    			</div>
    		);
    	}
    }
    export default Test;
    

    需要使用到后退按钮

    后退按钮可以使用普通按钮,并为其加上点击事。可以使用window.history.back(),或者this.props.history.goBack()

    import React, {Component} from 'react';
    class Test extends Component {
    	constructor(props){
    		super(props);
    	}
    	handleClick1 = ()=>{
    		window.history.back();
    	}
    	handleClick2 = ()=>{
    		this.props.history.goBack();
    	}
    	render (){
    		return (
    			<div>
    				<button onClick={this.handleClick1}>button1</button>
    				<button onClick={this.handleClick2}>button2</button>
    			</div>
    		);
    	}
    }
    export default Test;
    

    需要注意如果使用this.props.history.goBack()后退,组件初始化时继承父组件的props。

    react-router-dom详细介绍

    可以参考: https://blog.csdn.net/wang19970228/article/details/95305549

    不喜勿喷,有错误之处希望评论指出。

    展开全文
  • react-router-dom 路由配置、跳转与传参一、react-router-dom 路由配置二、react-router-dom 路由跳转三、react-router-dom 路由传参 本文所述的 react-router-dom 版本为 5.0.0;react-router 版本为 5.0.0。 一、...

    本文所述的 react-router-dom 版本为 5.0.0;react-router 版本为 5.0.0。

    一、react-router-dom 路由配置

    import React from 'react';
    import {HashRouter, BrowserRouter,Route,Redirect,Switch,Link,NavLink} from 'react-router-dom';
    import Home from './component/home';
    import Detail from './component/detail';
    const Router = () => (
        <BrowserRouter>     
            <Route  exact  path="/"   component={Home}/>
            <Route  path="/detail"  name="detail" component={Detail}/>
        </BrowserRouter>
    );
    export default Router;
    
    1. 路由配置属性主要有 path、name、component 等。
      path:组件相对路径
      name:组件路径别名
      component:组件地址
    2. 在路由配置中,有两个属性 exact 和 strict 表示路径匹配。
      “/detail” exact 属性为 true 时匹配的路由有:"/detail/",
      但是 url 中有 “/detail/” 匹配不到。
      “/detail” strict 属性为 true 时匹配的路由有:"/detail",
      但是 “/detail/” 可以被匹配到。
      综上所述,要想严格匹配,就需要将 exact 和 strict 都设为 true

    二、react-router-dom 路由跳转

    路由跳转有两种方式。

    1. link 或者 NavLink形式,实质是个 a 标签。区别是后者可以切换时改变样式,用法如下:
    <ul>
      <li><NavLink exact to="/" activeStyle={{
               fontWeight: 'bold',
               color: 'red'
             }}>home</NavLink>
      </li>
      <li><NavLink exact to="/detail" activeStyle={{
              fontWeight: 'bold',
              color: 'red'
             }}>detail</NavLink>
      </li>
    </ul>
    
    1. 直接使用点击事件,用法如下:
    <ul>
      <li onClick={() => this.props.history.push({pathname:'detail'})}><div>home</div>
      </li>
      <li onClick={() => this.props.history.push({pathname:'home'})}><div>detail</div>
      </li>
    </ul>
    

    三、react-router-dom 路由传参

    上面有提到两种路由跳转方式,相应的路由传参也有两种方式。

    1. 组件跳转传参
    <ul>
      <li><NavLink exact to="/" activeStyle={{
               fontWeight: 'bold',
               color: 'red'
             }}>home</NavLink>
      </li>
      <li><NavLink exact to={{pathname:'detail',state:{id:2}}} activeStyle={{
              fontWeight: 'bold',
              color: 'red'
             }}>detail</NavLink>
      </li>
    </ul>
    

    使用 NavLink 进行配置,使用 to 属性进行跳转和传参。

    1. 事件跳转传参
    <ul>
      <li onClick={() => this.props.history.push({pathname:'detail',state:{id:1}})}><div>home</div>
      </li>
      <li onClick={() => this.props.history.push({pathname:'home',state:{
      id:0}})}><div>detail</div>
      </li>
    </ul>
    
    1. 获取参数
    constructor(props){
            super(props);
            console.log(this.props.history.location.state);
        }
    
    展开全文
  • 【转载:https://www.cnblogs.com/dragon-cat/p/8919334.html】
    展开全文
  • react虚拟dom解读

    2019-12-12 10:53:52
    react虚拟dom解读什么是虚拟dom?一、DOM是什么?二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的...
  • 在上一篇博客React虚拟DOM原理中,我们探索了如何创建虚拟DOM,那么创建了虚拟DOM之后,又是怎么转换成真实DOM,渲染在页面中的呢,下面我们继续探索。 ...
  • 1. React-Router 和 React-Router-DOM React-Router React-Router提供了一些router的核心API,包括Router, Route, Switch等,但是它没有提供 DOM 操作进行跳转的API。 React-Router-DOM React-Router-DOM ...
  • VirtualDOM模型负责VirtualDOM底层框架的创建工作,它拥有整套的VirtualDOM标签,并负责虚拟节点的创建、更新、删除等工作。下面是一个简易的VirtualDOM模型,它并不复杂,只需要具备: 标签名 节点属性:样式,...
  • &lt;BrowserRouter&gt; &lt;Router&gt;的一种,通过使用HTML5提供的history API(pushState,replaceState,...basename: 该router下路由路径的base url....如果你的页面路由路径为某个子目录,那base url...
  • React中Virtual DOM几乎涵盖了所有的原生DOMReact大部分工作都是在Virtual DOM完成的。 ReactDOMComponent针对Virturl DOM主要进行了一下处理: 属性的操作,事件的处理 子节点的更新 二、如何更新属性 当执行...
  • React虚拟DOM原理

    2019-12-14 20:45:32
    1.什么是虚拟DOM 我们在前端面试的时候,经常会被问到什么是虚拟DOM。这个概念,感觉很熟悉,但又说不出它到底是什么。现在我们来探索一下到底什么是虚拟DOM。 首先我们看下什么是DOM,对于DOM,我们应该都很熟悉了...
  • 就需要使用到路由,在React中,常用的有两个包可以实现这个需求,即react-router和react-router-dom。那么这两个包有什么区别呢?不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件...
  • react-router 与 react-router-dom 通过路由配置匹配URL来执行对应的代码。 react-router 用法 通过<link to= “home” > 和 <route path = " /home" component ={home}>来进行路由的跳转和匹配 例子 在...
  • 思想在react的世界里,都是状态变更(数据变更)来驱动dom变化,动态添加dom不像以前用jquery一样append一个或者一个<td> 这样了,而是通过装载<li> 或者<td> 数据数组[]来动态添加dom,下面的例子实现使用了antd的...
  • react-router-dom详解

    2019-04-24 18:08:18
    <BrowserRouter> <BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 ... import { BrowserRouter } from 'react-router-dom'; <BrowserRouter ba...
  • React 初次渲染的时候无非会经历如下四个步骤:ReactElement 元素的创建,以及它如何表达嵌套在上个章节中也已阐述。React 的难点就在于如何进行数据处理,并且保持高效,我们暂且忽略它。秉持由浅入深的原则进行...
  • 基于react-router-dom ,实现react中路由的跳转 既然是基于react-router-dom实现的路由,那么我们第一步当然是下载react-router-dom啦 npm i react-router-dom -s 基本概念 我们先讲几个我们要用到的存在于react-...
  • 自学react也那么久了,因为是自学嘛,当然很多坑,特别是react中如何操控DOM这一方面,就很头大,因为react生成的是虚拟的DOM,是无法直接操作的,在网上也查找了很多这方面的知识,但就是没能领悟,今天在做一个...
  • react-router-dom笔记

    2017-10-23 17:12:50
    参考地址:http://blog.csdn.net/sinat_17775997/article/details/69218382import as 关键字用来给导入的变量设置新的名字,同时可以将整个模块导入。 改名字: import { lastName as surname } from './profile';...
  • 1. React Router React Router包含了四个包: 包名 描述 react-router React Router 核心api react-router-dom React Router的DOM绑定,在浏览器中运行不需要额外安装 react-router react-router-native ...
1 2 3 4 5 ... 20
收藏数 16,181
精华内容 6,472
关键字:

dom上样式 react