Для чего используется компонент React 'displayName'?

Я знаю, что он считал хорошей практикой, чтобы назвать компонент реакции, добавив свойство displayName, но не уверен, что знаю почему. В ответных документах говорится:

Почему так важно? что произойдет, если я не добавлю его? (до сих пор у меня его не было и не было отладки проблем)

Есть ли какие-либо рекомендации/рекомендации относительно того, как назвать компоненты?

Ответы

Ответ 1

Я всегда устанавливал displayName на то же имя, что и переменная, которой я ее присваиваю. Это будет использоваться только в сборках разработки, поскольку оно удаляется с помощью устранения мертвого кода в производственных сборках и не должно опираться на ваше приложение.

Что касается того, где он используется, то это в основном происходит при обмене сообщениями об ошибках. Вот почему он упоминается как полезный для отладки. Если ни одно имя не может быть получено, сообщения об ошибках по умолчанию говорят Component, которые крайне сложно отлаживать, если в вашем проекте имеется более одного компонента.

Вот несколько сообщений об ошибках, которые ссылаются на displayName в источнике реакции:

Недействительный возврат

Ошибка встроенного стиля

Ответ 2

эта статья помогла мне:

Как получить строковое имя класса компонента React Native?

    class CardGroup extends Component {
      render() {
        return (
          <div>{this.props.children}</div>
        )
      }
    }
    CardGroup.propTypes = {
      children: function (props, propName, componentName) {
        const prop = props[propName]

        let error = null
        React.Children.forEach(prop, function (child) {
          if (child.type !== Card) {
            error = new Error(''' + componentName + '' children should be of type 'Card'.');
          }
        })
        return error
      }
    }