feature: #1690

CHANGELOG.md

@@ -1,5 +1,7 @@
 # 更新日志
+# 3.7.0
 
+- 优化 `Grid` 组件接受原生属性 [#1690](https://github.com/XiaoMi/hiui/issues/1690)
 # 3.6.1
 - 修复部分组件 'regeneratorRuntime is not defined' 问题 [#1719](https://github.com/XiaoMi/hiui/issues/1719)
 - 修复 `Slider` max 和min 受控问题 [#1703](https://github.com/XiaoMi/hiui/issues/1703)

components/grid/index.js

@@ -1,25 +1,17 @@
-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import classNames from 'classnames'
 import './style/index'
 const PropTypes = require('prop-types')
 
 class Col extends Component {
-  render () {
-    let {
-      children,
-      span = '',
-      style = {},
-      offset = '',
-      id,
-      className,
-      justify
-    } = this.props
-    const {gutter = false} = this.context
-    let obj = {}
+  render() {
+    let { children, span = '', style = {}, offset = '', id, className, justify, ...others } = this.props
+    const { gutter = false } = this.context
+    const obj = {}
     obj['hi-grid__col-' + span] = span && true
     obj['hi-grid__offset-' + offset] = offset && true
     obj['hi-grid__col--gutter'] = gutter
-    let colClass = classNames(obj)
+    const colClass = classNames(obj)
 
     if (justify) {
       style = Object.assign({}, style, {
@@ -29,11 +21,7 @@ class Col extends Component {
     }
 
     return (
-      <div
-        id={`${id || ''}`}
-        className={`${colClass} ${className || ''}`}
-        style={style}
-      >
+      <div {...others} id={`${id || ''}`} className={`${colClass} ${className || ''}`} style={style}>
         {children}
       </div>
     )
@@ -44,24 +32,17 @@ Col.contextTypes = {
 }
 
 class Row extends Component {
-  getChildContext () {
-    return {gutter: this.props.gutter}
+  getChildContext() {
+    return { gutter: this.props.gutter }
   }
 
-  render () {
-    let {
-      children,
-      style = {},
-      className,
-      id,
-      gutter,
-      justify
-    } = this.props
+  render() {
+    let { children, style = {}, className, id, gutter, justify, ...others } = this.props
 
-    let obj = {}
+    const obj = {}
     obj['hi-grid__row'] = true
     obj['hi-grid__row--gutter'] = gutter
-    let rowClass = classNames(obj)
+    const rowClass = classNames(obj)
 
     if (justify) {
       style = Object.assign({}, style, {
@@ -70,11 +51,7 @@ class Row extends Component {
     }
 
     return (
-      <div
-        id={`${id || ''}`}
-        className={`${rowClass} ${className || ''}`}
-        style={style}
-      >
+      <div {...others} id={`${id || ''}`} className={`${rowClass} ${className || ''}`} style={style}>
         {children}
       </div>
     )
@@ -85,12 +62,10 @@ Row.childContextTypes = {
 }
 
 class Br extends Component {
-  render () {
-    let {height = '4px', style = {}} = this.props
+  render() {
+    const { height = '4px', style = {} } = this.props
     style.height = parseInt(height) + 'px'
-    return (
-      <div style={style} />
-    )
+    return <div style={style} />
   }
 }
-export default {Row, Col, Br}
+export default { Row, Col, Br }