inherit props #135

jljsj33 · 2018-04-20T05:58:29Z

No description provided.

coveralls · 2018-04-20T10:06:58Z

Coverage increased (+0.01%) to 99.675% when pulling 0e2b180 on inherit-props into e688ac2 on master.

jljsj33 · 2018-04-20T10:50:49Z

好了 @afc163

picodoth · 2018-04-21T04:12:25Z

@jljsj33 能提供一些背景么？没太懂

jljsj33 · 2018-04-21T10:28:27Z

data-*

jljsj33 · 2018-04-21T10:40:46Z

我这边 landings 编辑时是用 props 传递，用到了 data-id 和其他 data-之类的。。朱兴民叫我在外层套 div ，那只能获取 Menu 外层参数，Item 就不能获取。。。更何况(只我的想法)组件本来就应该继承 props，更方便让别人使用，以前这个组件连 style 都不带，那别人想稍改样式都不可以。最好还是带上吧。。

picodoth · 2018-04-21T11:59:48Z

src/MenuMixin.js

@@ -206,19 +206,22 @@ const MenuMixin = {
      domProps.tabIndex = '0';
      domProps.onKeyDown = this.onKeyDown;
    }
+    const { prefixCls, eventKey, visible } = props;
+    menuInheritProps.forEach(key => delete props[key]);


如果这个地方的意思是说，menu自己的props不往下传，我觉得应该把menuInheritProps改名成menuProps就好了

可能这名称不好。。。我是把所有导航里的props提到一个地方。。因为很多重复的。。每个都跑一遍也没关系。。。

picodoth · 2018-04-21T12:02:07Z

@jljsj33 你这样就是给底层元素提供一种传入props的后门是吧，我觉得挺hack的。比如我想在menu上加一个比如跟padding有关的style，结果就直接传到<li>了？ @afc163 看看？

jljsj33 · 2018-04-21T13:17:38Z

额。。。li上的style应该是在Item上吧。。。加这个的意思是把dom的所有可添加的参数都可传到组件上

picodoth · 2018-04-22T02:58:55Z

你现在的这个做法，menu上的style就是会传到li上，因为你没有把style从props里过滤掉啊。我觉得如果你真的要传自己额外的数据，集中放在一个props上不行么，比如叫configData啥的，就不用这么搞了

jljsj33 · 2018-04-22T06:57:49Z

???? 别蒙我。。怎么可能把 menu 的 style 传到 li上？

jljsj33 · 2018-04-22T07:00:34Z

别逗我。。。@afc163 合掉。发个版本。。

picodoth · 2018-04-22T07:29:42Z

我的错，以为所有menu上的props都自动传下去了。别的没啥问题了，menuInheritProps那个地方还是觉得怪怪的。考虑一下直接通过Menu组件获取props (Menu.propTypes)? 否则后面props有修改还得回过头来改menuInheritProps?

afc163 · 2018-04-23T04:04:48Z

src/MenuItem.jsx

@@ -165,8 +165,10 @@ export const MenuItem = createReactClass({
    if (props.mode === 'inline') {
      style.paddingLeft = props.inlineIndent * props.level;
    }
+    menuAllProps.forEach(key => delete props[key]);


这样 MenuItem 上的 onClick、onMouseEnter、onMouseLeave 就没了，这几个可以有的。

MenuItemGroup 和 SubMenu 同理。

不对啊，，，这些事件不是在内部重写了吗？？？那还带上干啥？？？
有 { ...mouseEvent } 啊...

好像只有 group 上有用，，加着吧。。。

afc163 · 2018-04-23T16:16:20Z

冲突了，可能要重新改过。

afc163 · 2018-04-23T16:16:42Z

几个子组件的 onClick 顺便支持一下吧。

jljsj33 · 2018-04-24T02:48:26Z

我日，，什么鬼？

jljsj33 · 2018-04-24T03:28:09Z

props 带下去了，，子组件里默认有这几个鼠标事件吧。。。

yesmeck · 2018-04-24T06:43:10Z

把这里

menu/src/SubPopupMenu.js

Lines 259 to 284 in e688ac2

    
           const newChildProps = { 
        
             mode: props.mode, 
        
             level: props.level, 
        
             inlineIndent: props.inlineIndent, 
        
             renderMenuItem: this.renderMenuItem, 
        
             rootPrefixCls: props.prefixCls, 
        
             index: i, 
        
             parentMenu: props.parentMenu, 
        
             // customized ref function, need to be invoked manually in child's componentDidMount 
        
             manualRef: childProps.disabled ? undefined : 
        
               createChainedFunction(child.ref, saveRef.bind(this, i)), 
        
             eventKey: key, 
        
             active: !childProps.disabled && isActive, 
        
             multiple: props.multiple, 
        
             onClick: this.onClick, 
        
             onItemHover: this.onItemHover, 
        
             openTransitionName: this.getOpenTransitionName(), 
        
             openAnimation: props.openAnimation, 
        
             subMenuOpenDelay: props.subMenuOpenDelay, 
        
             subMenuCloseDelay: props.subMenuCloseDelay, 
        
             forceSubMenuRender: props.forceSubMenuRender, 
        
             onOpenChange: this.onOpenChange, 
        
             onDeselect: this.onDeselect, 
        
             onSelect: this.onSelect, 
        
             ...extraProps, 
        
           };

从 Menu 传给 MenuItem 的 props group 到 menuProps 好点吧

jljsj33 · 2018-04-24T07:56:24Z

@yesmeck 啥意思，，没懂

yesmeck · 2018-04-24T07:59:00Z

就是改成这样：

const menuProps = {
  mode: props.mode,
  level: props.level,
  ...
};
return React.cloneElement(child, { menuProps });

这样就不需要再维护一个 props 列表去 MenuItem 里删除 Menu 的 props。

jljsj33 · 2018-04-25T06:56:44Z

@afc163 可以合了啊。。。

afc163 · 2018-04-26T09:37:42Z

close ant-design/ant-design#9004

blog-lyn · 2018-05-23T09:09:01Z

好坑啊我们是把props都传到item里面使用,但是不想Create到 dom节点上啊,现在就会报错:

React does not recognize the `TreeNode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `treenode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in li (created by SubMenu)
    in SubMenu (created by Connect(SubMenu))
    in Connect(SubMenu) (created by SubMenu)
    in SubMenu (created by TreeNode)
    in TreeNode (created by DragSource(TreeNode))

难道再增加一个配置项, 把不想增加到 item上的属性写在一个list里面,在list里面的prop delete掉?

picodoth · 2018-05-23T13:36:19Z

@blog-lyn 什么情况下会把TreeNode这样的特殊属性传给MenuItem用呢，或者反过来说MenuItem除了spread到li之外，如何使用这样的特殊props? 如果你说的用例确实是有效用例，那我们可能得考虑在MenuItem单独开一个新的props来存放希望传到li上的属性。

blog-lyn · 2018-07-17T11:04:20Z

@picodoth
我们的menu是一个树结构, 大小最多会有几百个节点,
为了在每个menu.item render 显示不同的名字和绑定不同的事件,我们需要除了menu.item key 以外的属性.

因此我们在处理事件的时候需要直接拿到对应的menu.item的data.

  <Menu.Item  {...this.props}>
        xxxx
  </Menu.Item>

jljsj33 requested a review from afc163 April 20, 2018 05:58

jljsj33 changed the title ~~inherit props~~ [WIP]inherit props Apr 20, 2018

jljsj33 changed the title ~~[WIP]inherit props~~ inherit props Apr 20, 2018

picodoth reviewed Apr 21, 2018

View reviewed changes

afc163 reviewed Apr 23, 2018

View reviewed changes

jljsj33 added 11 commits April 24, 2018 10:50

inherit props

2b4b08e

update

573c1d1

update

47b0b64

update menu props mixin

ae9fd6c

update

3559f83

update

23b4bc3

extract inherit props to util

7def68f

fix lint

a925c9c

item props store

5e68def

item props activeKey

28cb9c8

fix

2b5c70a

jljsj33 added 3 commits April 24, 2018 10:56

update menuInheritProps to menuAllProps

b746abc

all props remove mouser event

dd8ae62

rebase master, fix inlineIndent propsTypes oneOfType is Array

95a42e1

jljsj33 force-pushed the inherit-props branch from ae1ffa7 to 95a42e1 Compare April 24, 2018 03:24

add item onClick, related ant-design/ant-design#9004

537a9d6

Add test case

0e2b180

afc163 merged commit c9c17ed into master Apr 26, 2018

afc163 deleted the inherit-props branch April 26, 2018 09:37

yesmeck mentioned this pull request Apr 27, 2018

chore: fix aria-* attirbutes #137

Merged

picodoth added a commit that referenced this pull request Apr 28, 2018

fix: regression from #135

c7227ff

yesmeck mentioned this pull request May 5, 2018

fix: Menu[onClick] should not be triggered by propagated onClick event #140

Merged

picodoth mentioned this pull request May 5, 2018

[WIP]fix: passing onclick through #141

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

inherit props #135

inherit props #135

jljsj33 commented Apr 20, 2018

coveralls commented Apr 20, 2018 •

edited

Loading

jljsj33 commented Apr 20, 2018

picodoth commented Apr 21, 2018

jljsj33 commented Apr 21, 2018

jljsj33 commented Apr 21, 2018

picodoth Apr 21, 2018

jljsj33 Apr 21, 2018

picodoth commented Apr 21, 2018 •

edited

Loading

jljsj33 commented Apr 21, 2018

picodoth commented Apr 22, 2018

jljsj33 commented Apr 22, 2018

jljsj33 commented Apr 22, 2018

picodoth commented Apr 22, 2018

afc163 Apr 23, 2018 •

edited

Loading

jljsj33 Apr 23, 2018

jljsj33 Apr 23, 2018

afc163 commented Apr 23, 2018

afc163 commented Apr 23, 2018

jljsj33 commented Apr 24, 2018

jljsj33 commented Apr 24, 2018

yesmeck commented Apr 24, 2018

jljsj33 commented Apr 24, 2018

yesmeck commented Apr 24, 2018

jljsj33 commented Apr 25, 2018

afc163 commented Apr 26, 2018

blog-lyn commented May 23, 2018

picodoth commented May 23, 2018

blog-lyn commented Jul 17, 2018

inherit props #135

inherit props #135

Conversation

jljsj33 commented Apr 20, 2018

coveralls commented Apr 20, 2018 • edited Loading

jljsj33 commented Apr 20, 2018

picodoth commented Apr 21, 2018

jljsj33 commented Apr 21, 2018

jljsj33 commented Apr 21, 2018

picodoth Apr 21, 2018

Choose a reason for hiding this comment

jljsj33 Apr 21, 2018

Choose a reason for hiding this comment

picodoth commented Apr 21, 2018 • edited Loading

jljsj33 commented Apr 21, 2018

picodoth commented Apr 22, 2018

jljsj33 commented Apr 22, 2018

jljsj33 commented Apr 22, 2018

picodoth commented Apr 22, 2018

afc163 Apr 23, 2018 • edited Loading

Choose a reason for hiding this comment

jljsj33 Apr 23, 2018

Choose a reason for hiding this comment

jljsj33 Apr 23, 2018

Choose a reason for hiding this comment

afc163 commented Apr 23, 2018

afc163 commented Apr 23, 2018

jljsj33 commented Apr 24, 2018

jljsj33 commented Apr 24, 2018

yesmeck commented Apr 24, 2018

jljsj33 commented Apr 24, 2018

yesmeck commented Apr 24, 2018

jljsj33 commented Apr 25, 2018

afc163 commented Apr 26, 2018

blog-lyn commented May 23, 2018

picodoth commented May 23, 2018

blog-lyn commented Jul 17, 2018

coveralls commented Apr 20, 2018 •

edited

Loading

picodoth commented Apr 21, 2018 •

edited

Loading

afc163 Apr 23, 2018 •

edited

Loading