2019-03-07 09:47:41 u013626215 阅读数 60
  • React风格的企业前端技术

    React视频教程,本次分享将围绕如何打造react风格的前端项目展开,重点介绍当下流行的前端项目的工作流,react、angular等火热的前端框架,karma、Mocha等流行的前端单元测试框架,用户体验、性能优化等。

    4010 人正在学习 去看看 CSDN讲师

bug记录:

  1. Command run-Android unrecognized. Make sure that you have run npm install and that you are inside a React-native project.

此时需要下载node_modules依赖库,输入如下命令:yarn add react-native-cli

2019-07-01 11:47:45 allhiluluxiu 阅读数 57
  • React风格的企业前端技术

    React视频教程,本次分享将围绕如何打造react风格的前端项目展开,重点介绍当下流行的前端项目的工作流,react、angular等火热的前端框架,karma、Mocha等流行的前端单元测试框架,用户体验、性能优化等。

    4010 人正在学习 去看看 CSDN讲师

React开发AntD并写modal和switch遇到的bug

  • switch和modal连写,无法添加less

笔者在开发大项目时候用了React+AntD1.x版本+less,遇到一个bug,1.x官网上的例子switch和Modal在html上是并列结构,switch的开关控制modal的显示和隐藏。

由于开发任务的划分,我需要做一个switch操作modal的子组件,我直接沿用官网的文档,在html结构上switch和modal是属于并列的,交互功能完全正常,但是在修改样式时候无法对子组件的modal进行修改。

  • 怎么解决?
    这种样式bug我借助同时的经验,利用背景颜色测试类名的样式到底有没有添加进去,在这里我发现modal的背景颜色有添加,但是modal下的其他类名的背景颜色没有。
  • 我推断是类名没有被正确添加上
    翻开后台查找类名,所有类名都被添加上了,但是我的less有正确的被引入啊?less有了类名正确。
  • 猜测就是less的结构问题
    花了半个小时一个字符的扣样式添加,查看结构,发现结构没有问题。
  • 总结情况:1.类名没有错 2.less没有错 3.less已经被正确的编译和引入
    根据我和官网的代码差异,我的下一个猜测是组件化的影响
  • modal和switch放在子组件,与父组件通讯之后子组件的的便签会被antD做一个转化,modal和switch会被拆分成若干个div和不同的样式。
  • 官网的是modal和switch是直接转化的,但是我多了组件这一层,嵌套的过程中大的modal外层是可以修改样式,内部节点不行。
  • 最终我的解决方法是:去掉modal的盒子类名,直接写内部节点的类名,成功修改了样式。但是疑问来了,为什么这么做可以修改样式?
2018-01-13 12:01:00 weixin_30416871 阅读数 5
  • React风格的企业前端技术

    React视频教程,本次分享将围绕如何打造react风格的前端项目展开,重点介绍当下流行的前端项目的工作流,react、angular等火热的前端框架,karma、Mocha等流行的前端单元测试框架,用户体验、性能优化等。

    4010 人正在学习 去看看 CSDN讲师

在学习React的道路上,经常遇到很多的bug,而且发现它的bug很不好找到错误在哪里,尤其像下面的这些:

但是我们可以利用这样一种方法:从控制台中找到提供的链接

1. Error: Minified React error #109;

 Error: Minified React error #109;

visit http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Form for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

从该链接中可以找到:错误原因:没有return返回数据

Form.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

2. Uncaught TypeError: Super expression must either be null or a function, not undefined

错误原因:就在super之前查找代码的错误,一般是拼写错误;大都是React.Component的C没有大写;

 3.TypeError: Cannot read property 'func' of undefined

在使用react-router的时候,要注意下载的版本问题;

import {Router,hashHistory,browserHistory,Route,IndexRoute,IndexRedirect,Redirect} from 'react-router'

上面下载的版本要使用:

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-mixin": "^4.0.0",
"react-router": "^2.8.1",

转载于:https://www.cnblogs.com/naniandongzhi/p/8278771.html

2017-06-26 17:18:51 m0_38014347 阅读数 128
  • React风格的企业前端技术

    React视频教程,本次分享将围绕如何打造react风格的前端项目展开,重点介绍当下流行的前端项目的工作流,react、angular等火热的前端框架,karma、Mocha等流行的前端单元测试框架,用户体验、性能优化等。

    4010 人正在学习 去看看 CSDN讲师

在开发中遇到React.Children.only expected toreceive asingle React element child无法解决,截图如下:


最终找到原因是这里是RN的一个版本BUG,通过命令:npm  update react-native-looped-carousel --save,

更新下就好了




















2020-01-09 09:40:47 weixin_45743297 阅读数 4
  • React风格的企业前端技术

    React视频教程,本次分享将围绕如何打造react风格的前端项目展开,重点介绍当下流行的前端项目的工作流,react、angular等火热的前端框架,karma、Mocha等流行的前端单元测试框架,用户体验、性能优化等。

    4010 人正在学习 去看看 CSDN讲师

大清早上,刚买的韭菜粉条菜盒还没来得急消灭.
老师让写个轮播图.
结果图片就出不来.

import React, { Component } from 'react'

export default class Banner extends Component {

  data = [
    {
        title: "图片1的相关描述",
        url: "./assets/images/11.jpg"
    },
    {
        title: "图片2的相关描述",
        url: "./assets/images/22.jpg"
    },
    {
        title: "图片3的相关描述",
        url: "./assets/images/33.jpg"
    },
    {
        title: "图片4的相关描述",
        url: "./assets/images/44.jpg"
    },
]
  render() {
    return (
      <div>
        <div>
          <img src={require(this.data[0].url)} />
          <button>&lt;</button>
          <button>&gt;</button>
          <div>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
          </div>
        </div>
        <div>
          {this.data[0].title}
        </div>
      </div>
    )
  }
}

啦啦啦,解决了;

export default class Banner extends Component {

  data = [
    {
        title: "图片1的相关描述",
        url: require("./assets/images/11.jpg")
    },
    {
        title: "图片2的相关描述",
        url: require("./assets/images/22.jpg")
    },
    {
        title: "图片3的相关描述",
        url: require("./assets/images/33.jpg")
    },
    {
        title: "图片4的相关描述",
        url: require("./assets/images/44.jpg")
    },
]
  render() {
    return (
      <div>
        <div>
          <img src={ this.data[0].url } />
          <button>&lt;</button>
          <button>&gt;</button>
          <div>
            <a></a>
            <a></a>
            <a></a>
            <a></a>
          </div>
        </div>
        <div>
          {this.data[0].title}
        </div>
      </div>
    )
  }
}

嗯,可以放心吃早餐了.

写完了

import React, { Component } from 'react'

export default class Banner extends Component {

  data = [
    {
      title: "图片1的相关描述",
      url: require ("./assets/images/11.jpg")
    },
    {
      title: "图片2的相关描述",
      url: require ("./assets/images/22.jpg")
    },
    {
      title: "图片3的相关描述",
      url: require ("./assets/images/33.jpg")
    },
    {
      title: "图片4的相关描述",
      url:require ("./assets/images/44.jpg")
    },
  ]
  constructor(props) {
    super(props)
  
    this.state = {
      curP: 1
    }
  }
  
  // 下一页
  doNext = ()=>{
    let p = this.state.curP + 1 //页数最大是4
    if (p>4){
      p = 1
    }
    this.setState({
      curP:p
    }) 
  }
  // 上一页
  doPrev = ()=>{
    let p = this.state.curP - 1 //页数最小是1
    if (p<1){
      p = this.data.length
    }
    this.setState({
      curP:p
    })
  }
  render() {
    return (
      <div>
        <div>
          <img src={this.data[this.state.curP-1].url} 
            alt={this.data[this.state.curP-1].title}
            style={{ width: "200px",height: "130px"}}
          />
          <button onClick={this.doPrev}>&lt;</button>
          <button onClick={this.doNext}>&gt;</button>
        </div>
        <div>
          <span>{this.data[this.state.curP-1].title}</span>
        </div>  
      </div>
    )
  }

  componentDidMount() {
    setInterval( ()=> {
      this.doNext()
    },3000)
  } 
}

样式微调就ok啦 !
我们河南的早餐真不是盖的, 走过路过不要错过啊.

React 编程规范

阅读数 7022

React编程思想实例

阅读数 314

没有更多推荐了,返回首页