1.0.1 • Published 4 years ago
@feizheng/react-page-exception v1.0.1
react-page-exception
React page exception component.
installation
npm install -S @feizheng/react-page-exception
update
npm update @feizheng/react-page-exception
properties
property | type | default | description |
---|---|---|---|
className | String | - | - |
title | String | - | - |
description | String | - | - |
image | String | - | - |
usage
import css
@import "~@feizheng/react-page-exception/dist/style.scss"; @import "~@feizheng/react-empty-state/dist/style"; // customize your styles: $react-page-exception-options: ()
import js
import ReactPageException from '../src/main'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; class App extends React.Component { state = { value: '403', items: [ { title: '403', description: '抱歉,你无权访问该页面', image: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg' }, { title: '404', description: '抱歉,你访问的页面不存在', image: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg' }, { title: '500', description: '抱歉,服务器出错了', image: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg' } ] }; get value() { const { items, value } = this.state; return items.find((item) => item.title === value); } onChange = (inEvent) => { const { value } = inEvent.target; this.setState({ value }); }; render() { const { items, value } = this.state; console.log('value:', value, this.value); return ( <div className="app-container"> <ReactPageException {...this.value} /> <select name="sel1" onChange={this.onChange}> {items.map((item, index) => { return ( <option key={index} value={item.title}> {item.title} </option> ); })} </select> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));