react常见问题(三)

表格相关

<Table dataSource={data} className="mt1" columns={columns} pagination={pagination}  rowKey={record => record.city_id}/>
const columns = [{
      title: ‘学校名称‘,
      dataIndex: ‘school_name‘,
      key: ‘school_name‘,
      render:(text,record)=>{
        if(text!=null){
          return (<span title={text}>{text.length>15?text.substring(0,15)+‘...‘:text}</span>)
        }
      }
    }]
var page = {
      onChange: (index) => {
        var params={
          pageIndex: index,
          pageSize: 10,
          filter: {
            city_code: this.state.cityCode,
            school_name: this.state.schoolName
        }};
        this.props.dispatch(actions.getlList(params));
      },
      total: parseInt(count),
      showTotal: (total) => {
        return `共 ${count} 条`
      },
      showQuickJumper: false,
      showSizeChanger: false,
    }

表格中的key不允许有空格,dataIndex属性为必须,确保datasource为数组形式

时间: 2025-01-09 04:02:58

react常见问题(三)的相关文章

React Native 三:样式

一.声明和使用样式 1.React Native里面的样式和使用如下面所示,StyleSheet.create这个构造函数不是必须的: index.android.js文件 import React, { - - } from 'react-native'; class AwesomeProject extends Component { render() { return ( <View> //所有核心组件都可以接受style属性 <Text style={styles.base}&g

react学习(三)介绍JSX

参考:https://facebook.github.io/react/docs/introducing-jsx.html 一.JSX介绍 ReactDOM.render(<div>hello world</div>, document.getElementById('root'));红色部分如果加一层''号,会出错,JSX既不是字符串也不是HTML,它是JavaScript的语法拓展 二.JSX使用 1.使用大括号嵌入js表达式 let a = "hello world

React的三种用法

import React, { Component } from "react" export default class MyInput extends Component { // 第一种 getvalue11= () => { let hah = this.refs.zhi.value console.log("第1种", hah) } // 第2种 ref的使用 getvalue=()=>{ console.log(this.input1.val

玩转 React(三)- JavaScript代码里写HTML一样可以很优雅

这是<玩转 React>系列的第三篇,看到本篇的标题,了解过 React 的同学可能已经大致猜到我要讲什么了,本篇中要讲的内容对于刚接触 React 的同学来说,可能有些难以接受,但希望你能坚持学下去,这是 Facebook 的前端大神们为前端开发做出的革命性创新. React 第一印象 废话不多说,先看一段代码: class HelloMessage extends React.Component { render() { return <div>Hello {this.prop

react常见问题(一)

1.setState的方法不能用在render中,可用this.state=" "代替,一般不推荐,在render里面不应该有此操作. 2.setState引起重新渲染render是一个异步操作. 3.return后面不能直接换行,要跟代码或者大括号. 4.原生HTML元素名以小写字母开头,而自定义的react组件必须以大写字母开头.除此之外还需要注意组件类只能包含一个顶级标签,否则报错. 5.页面间传值link='houseInfo?id=${record.id}';接收页面:var

react常见问题(二)

本部分主要为表单相关. 1.表单form的react使用流程. A.引入antd插件,声明FormItem import {Form} from 'antd'; const FormItem = Form.Item; B.包装属性,使组件带有this.props.form属性 schoolEdit = Form.create({})(schoolEdit); C.在render中声明要使用到的this.props.form带的api const {getFieldDecorator} = thi

正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate

性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈?而在react内部则是通过使用一些精妙的技巧来最小化每次造成ui更新的昂贵的dom操作从而保证性能的. 避免直接作用于DOM react实现了一层虚拟dom,它用来映射浏览器的原生dom树.通过这一层虚拟的dom,可以让react避免直接操作dom,因为直接操作浏览器dom的速度要远低于操作Jav

React(三)JSX内置表达式

(一)JSX是什么? React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 我们不需要一定使用 JSX,但它有以下优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化. 它是类型安全的,在编译过程中就能发现错误. 使用 JSX 编写模板更加简单快速. (二)使用 JSX (1)注释写法 {/* 哈哈哈,你好 */} (2)添加自定义属性   需要使用 data- 前缀. <p data-

React.Component三种手动绑定this方法

React.Component有三种手动绑定方法: 可以在构造函数中完成绑定 可以在调用时使用method.bind(this)来完成绑定 可以使用arrow function来绑定. 拿上例的handleClick函数来说,其绑定可以有: 1.构造函数绑定 constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); //构造函数中绑定 } 2.调用时绑定method.bind(this)