Menu组件会覆盖MenuItem的index属性

Question

if(displayName === 'MenuItem') {
				return React.cloneElement(childElement, { index })
			} 

Menu组件的这段代码会覆盖子组件的index属性，使得MenuItem的可选index属性没有意义了

Answer 1

张轩 2020-09-26 21:13:45

同学你好 谢谢你发现了一个 bug，这里应该是有些问题的，我们可以从 childElement.props.index 拿出真实的 index，然后判断是否存在， childElement.props.index ? childElement.props.index : index. 给它赋值.

非常感谢同学的发现，我会修改代码，然后添加单测。

• 提问者 tyler4400 #1

  非常感谢！

• NioCo #2

  1. 如果是直接在cloneElement的第二个参数里写{ childElement.props.index ? childElement.props.index : index. }  会报错，显示 notCallable， 只能写index: index.toString()这种形式. 
  2. 为啥要这么写呢，直接覆盖不好吗

Answer 2

NioCo 2020-12-17 10:50:53

目的不就是覆盖这个子组件的index属性吗

Answer 3

不学会死掉 2024-01-25 20:12:01

我个人的理解，有三个index

1. 子组件menuItem中props上传来的index，作用是主动给某个menuItem设置index

2. 父组件menu中执行renderChildren时，map中利用children自己的index顺序初始化了index属性，这里按老师的优化写

 index: childElement.props.index ? childElement.props.index : index.toString()

3. context传入：menucontext.provider的index，这个index结合1中的index，在子组件menuitem中判断这个组件是否是当前选中的并添加active类，

'is-active': context.index === index

现在有一个场景是，某个menuitem是按顺序的第5个，默认index应该为4，那么如果主动设置这个组件props中的index为2的话，如果点击顺序第3个的menuitem，会不会同时给这两个menuitem都添加激活类is-active，或者两个menuitem的onSelect（index）会同时激发【因为一个是主动设置为2，另一个是位置原因默认格式化为2】，这点就比较混乱...