react+antd在使用中遇到的问题

1. 图片的引入

import Logo from '../../../assets/pirates/favicon.png'

render(){
	return(
	 <img alt='' style={{ height: '100%' }} src={Logo} />
	)
}

2. 关于tab切换效果

第一种

export default class Forum extends React.Component {
	state = {
        btnNum: 1,
    }
	
	render(){
		return(
		<Button 
		//style里放的是未点击时的样式，btn-active是点击后的样式
		  style={{ border: 0, height: '60px', marginLeft: '30px'}}
          className={`${this.state.btnNum === 1 ? 'btn-active' :''}`}
          onClick={() => {
                           this.setState({
                                btnNum: 1
                            })
         开发者论坛
        </Button>
        <Button 
		  style={{ border: 0, height: '60px', marginLeft: '30px'}}
          className={`${this.state.btnNum === 2 ? 'btn-active' :''}`}
          onClick={() => {
                           this.setState({
                                btnNum: 2
                            })
         AI 学习
        </Button>
        <Button 
		  style={{ border: 0, height: '60px', marginLeft: '30px'}}
          className={`${this.state.btnNum === 3 ? 'btn-active' :''}`}
          onClick={() => {
                           this.setState({
                                btnNum: 3
                            })
         资料下载
        </Button>
)
	}
}

效果如图

第二种

export default class Forum extends React.Component {
	state = {
       showTopic:0

    }
	
	render(){
		const topicList = [
            '全部',
            '开发板',
            '开发教程',
            '应用案例',
            '算法学习',
            '嵌入式开发',
            '应用开发',
        ]
		return(
		<div className="selecttopic">
          {topicList.length > 0 && topicList.map((item,index) => (
             <span 
              className={`${this.state.showTopic ===index ? 'topic-active' : 'topic-select'}`}
              onClick={() => {
                              this.setState({
                                  showTopic:index,                 
                              })
           }}  >
            {item}
             </span>
              ))}
          </div>
)
	}
}

效果

3. 标签多选效果

class PublishModule extends React.Component {
 state={
	showTopic:[]
}

 render(){
  const topicList = [
      '开发板',
      '开发教程',
      '应用案例',
      '算法学习',
      '嵌入式开发',
      '应用开发',
    ]
  return(
	<div>
	{topicList.map((item,index) => (
     <span
     className={`${this.state.showTopic.includes(index) ? 'top-active' : 'top-select'}`}
     onClick={()=>{
        // topic 为接口中存放标签内容的字段
     	const {topic,showTopic} = this.state
     	topic.includes(item) ? topic.splice(topic.indexOf(item),1): topic.push(item)
        showTopic.includes(index) ? showTopic.splice(showTopic.indexOf(index),1): showTopic.push(index)
        this.setState({
          topic,
          showTopic
        })              
   }}
   >{item}</span>
     ))}
	</div>
)
}
}

4. 文件作为组件引入到页面

import Login from './Login'

render(){
 return(
	<div>
	<Login />
	</div>
)
}

5. 富文本编辑器

braft-editor
具体的使用可搜索braft-editor，查看其api
效果如图：

6. 常用判断

常用三元表达式做判断，对于判断里套判断的情况，里面的判读可以用div或span包起来

7. 表单验证与localStorage，cookie

import cookie from 'js-cookie'
export default class Login extends Component {
	componentDidMount() {
	    // app端自动保存用户名密码
	    if (!isPC()) {
	      const username = localStorage.getItem('username')
	      const password = localStorage.getItem('password')
	      const remember = localStorage.getItem('remember')
	      const password1 = localStorage.getItem('password1')
	      const password2 = localStorage.getItem('password2')
	      if (remember) {
	        this.props.form.setFieldsValue({
	          password,
	          password1,
	          password2,
	          username,
	          remember
	        })
	      }
	    }
		
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        this.setState({
          loading: true
        })
        const response = await login(values)
        if (response.code === '0') {
          if (window.location.hostname.includes('horizon.ai')) {
            cookie.set('__user', values.username, { expires: 15 })
            cookie.set('nickName', values.name, { expires: 15 })
          } else {
            cookie.set('__user', values.username, { expires: 15 })
            cookie.set('nickName', values.name, { expires: 15 })
          }
          const gourl = sessionStorage.getItem('outUrl')
        
          if (!isPC() && values.remember) {
            localStorage.setItem('username', values.username)
            localStorage.setItem('password', values.password)
            localStorage.setItem('remember', true)
            window.location.href = '/home'
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
            localStorage.removeItem('remember')
            window.location.href = '/hobot'
          }
        }
        this.setState({
          loading: false
        })
      }
    })
  }

	 }
 render() {
    const { getFieldDecorator } = this.props.form
    return(
  		 <Form onSubmit={this.handleSubmit} style={{ width: 'auto' }}>
                <FormItem>
                  {getFieldDecorator('username', {
                    rules: [
                      {
                        required: true,
                        message: '请输入邮箱!'
                      }
                    ]
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ fontSize: '14px' }} />}
                      size="large"
                      className="login-input"
                      required="required"
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator
                  ('password', {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码!'
                      }
                    ]
                  })
                  (
                    <Input
                      prefix={<Icon type="lock" style={{ fontSize: '14px' }} />}
                      type="password"
                      placeholder="请输入密码"
                      size="large"
                      className="login-input"
                      required="required"
                    />
                  )}
                </FormItem>
                {!isPC() && (
                  <Form.Item>
                    {getFieldDecorator('remember', {
                      valuePropName: 'checked',
                      initialValue: false
                    })(<Checkbox>记住密码</Checkbox>)}
                  </Form.Item>
                )}
                <Form>
  )
}`
}

8. 前端实现分页

export default class ForumDetail extends React.Component {
  state = {
    // 当前要显示评论组数
    currentList: [],
    // 设置每一页的大小
    pageSize: 20,
    // 当前页  与组件的当前页绑定
    defaultCurrent: 1,
    // 总评论数
    totalNum: 1
  }
   constructor() {
    super()
    this.getListData = this.getListData.bind(this)
  }
 
	// 评论分页点击按钮切换
   getListData(current) {
    this.setState({
      defaultCurrent: current
    },
      () => {
        this.currentListInit(this.state.data[0])
      }
    )
  }
	//这是能拿到数据的接口
   queryRecommend = async () => {
    const response = await queryRecommend()
    if (response.code === '0') {
      this.setState({
        recommendlist: response.data
      })
    }
    // 初始化评论总条数和列表初始数据
    this.currentListInit(this.state.data[0])
    this.initTotalNum(this.state.data[0])
  }
	
	 // 初始化列表方法
  currentListInit = data => {
    const defaultCurrents = this.state.defaultCurrent;
    const pageSizes = this.state.pageSize;// data['commentList'] && 
    // eslint-disable-next-line dot-notation
    const tempArr = data['commentList'] && data['commentList'].slice(
      (defaultCurrents - 1) * pageSizes,
      (defaultCurrents - 1) * pageSizes + pageSizes
    );
    // 将截取好的数组，更新
    this.setState({
      currentList: tempArr
    });
    return tempArr;
  }

  // 初始化评论总条数
  initTotalNum = data => {
    // eslint-disable-next-line dot-notation
    const { length } = data['commentList']
    this.setState({
      totalNum: length
    })
  }

	render() {
    const {currentList} = this.state;
    return(
    // 修改分页组件
    <Pagination style={{ margin: '20px auto', textAlign: 'center' }}
       defaultCurrent={this.state.defaultCurrent}
         total={this.state.totalNum}
         pageSize={this.state.pageSize}
         onChange={this.getListData} />
	)
    }
}

9. 表头排序sorter显示的tooltip问题：（默认显示英文）
   通过

<tabel
locale={{
cancelSort="点击取消排序",
triggerAsc="点击升序",
triggerDesc="点击降序"
}}
>

</tabel>

10. 修改tabel每条的hover颜色

.ant-tabel  .ant-tabel-body>tr.ant-tabel-row:hover td{
background:red
}

11. Popover气泡卡片添加边框效果

 <Popover
  overlayClassName={styles.popoverClass}
  key={item.id}
  placement="left"
  content={content}
  trigger="click"
  >
  <div />
  </Popover>

// css样式
.popoverClass {
 :global {
  .ant-popover-inner-content {
     border: 1px solid rgba(60, 92, 255, 1) !important;
     border-radius: 5px;
     }
 .ant-popover-arrow {
      background-color: #fff !important;
     border-top-width: 1.2px;
     border-right-width: 1.2px;
      border-top-color: rgba(60, 92, 255, 1) !important;
     border-right-color: rgba(60, 92, 255, 1) !important;
    }
 }
 .buttonLine:hover button {
   color: rgba(60, 92, 255, 1);
   background-color: rgba(230, 233, 238, 1);
   }
 }

效果图：

12. Table组件无数据添加提示信息
    locale 默认⽂案设置，⽬前包括排序、过滤、空数据⽂案
    filterConfirm: ‘确定’
    filterReset: ‘重置’
    emptyText: ‘暂⽆数据’

可以在emptyText属性中处理，添加图片等

locale={{
emptyText:(
<div>...</div>
)
}}

13. table添加超长文本处理
    例如：

使用ellipsis 属性跟ToolTip 组件结合的方式

const Columns = [
      {
        title: '单位名称',
        dataIndex: 'jsdw',
        key: 'jsdw',
       // 解决方案：使用ellipsis 属性跟ToolTip 组件结合的方式
         ellipsis: true,
        render: (value, record) => {
          return (
            <Tooltip title={value}>
              <div className={styles.text}>
                {value}
              </div>
            </Tooltip>
          );
        },
      },
      ]
// css
.text{
  overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}