React使用组件名称

Question

为了简化e2e测试，我想向每个react组件data-component=属性添加组件名称。我想让它“自动”完成（无需在任何地方调整render()函数）。

任何人都知道如何对基于类和基于函数的组件可靠地做到这一点吗？

Answer 1

1. 通过静态属性ValueError: time data '230100' does not match format '%H%M%S' (match) 为每个组件设置组件名称。您需要手动设置。

2. 创建临时组件（高阶组件），以用displayName（或任何其他html标记）包装组件，该组件将具有必填属性。

   div

3. 用已创建的hoc包装所有组件导出语句。

   const withComponentName(WrappedComponent) => { const displayName = WrappedComponent.displayName || WrappedComponent.name || 'UnnamedComponent'; return props => ( <div data-component={displayName}><WrappedComponent {...props} /><div> ) }