正确命名组件名称，但不要太长

问题描述

我不知道如何命名我的组件，以便它在页面上看起来不错并且没有超长名称。 例如，我有一个应用程序，其中有一个UsersSidebar组件，内部有User组件。 但是我也有一个UserList，里面还有User组件，但组件不同。 然后页面上可能会有另一个不同的User组件。 因此，它们是3个不同的User组件，但它们都称为User。 我该如何解决这个问题？

我应该称它为“ users-sidebar-user”和“ user-list-user”，因为这看起来很长且笨拙。 如果我有2个不同的用户侧边栏组件怎么办？ 我应该将其称为一般用户侧边栏和论坛用户侧边栏 ，然后是论坛用户侧边栏用户吗？

// Here the <user> is a sidebar item <li>username</li>
<users-sidebar>
    <user>
    <user>
    <user>
</users-sidebar>

// Here the <user> is a different component <div><h1>username</h1></div
<user-list>
    <user>
    <user>
    <user>
</user-list>


// And here <user> is <div class="card">username</user>
<user>

Airbnb有一个React Styling指南，可能对您有帮助：

祝您命名愉快！ :)