Предупреждение: неизвестный проп

Предупреждение о неизвестном пропе выдаётся, когда вы пытаетесь отрендерить DOM-элемент с пропом, который React не может распознать как разрешённый DOM-атрибут или свойство. Вам следует убедиться, что DOM-элементы не получают по ошибке пропсы, которые к ним не относятся.

Есть несколько наиболее вероятных причин, из-за чего возникает это предупреждение:

1. Используете ли вы {...this.props} или cloneElement(element, this.props)? Может быть, ваш компонент передаёт собственные пропсы напрямую дочернему элементу (см. Компоненты и пропсы). Проверьте, что вы не перенаправляете случайно пропсы, предназначенные для родительского компонента, в дочерние компоненты.
2. Вы используете нестандартный DOM-атрибут на нативном DOM-узле. Например, с целью представить пользовательские данные. Вместо этого следует рассмотреть вариант с использованием data-атрибутов, описанных на MDN.
3. React не распознаёт указанный атрибут. С большой вероятностью, это будет исправлено в будущих версиях React. На сегодняшний же день React удаляет неизвестные атрибуты, поэтому они не будут отрендерены.
4. Имя React-компонента начинается со строчной буквы, поэтому React распознаёт его как DOM-тег, а не как компонент. Это происходит на основе соглашения о верхнем и нижнем регистре в JSX, которое позволяет React различать пользовательские компоненты от DOM-тегов.

Чтобы исправить ситуацию, составные компоненты должны получить все пропсы, которые предназначены только ему, а не его дочерним компонентам. Пример:

Плохо: Непредвиденный проп layout перенаправлен в тег div.

function MyDiv(props) {
  if (props.layout === 'horizontal') {
    // Плохо! Потому что мы уверены, что "layout" не проп, с которым <div> работает.
    return <div {...props} style={getHorizontalStyle()} />
  } else {
    // Плохо! Потому что мы уверены, что "layout" не проп, с которым <div> работает.
    return <div {...props} style={getVerticalStyle()} />
  }
}

Хорошо: Оператор расширения (...) помогает извлечь часть пропсов (например, layout) каждый в отдельную переменную, а оставшиеся — поместить в общую переменную (скажем, rest).

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

Хорошо: Вы также можете присвоить пропсы новому объекту и удалить из него те ключи, которые используете в текущем компоненте. Этот объект можно безопасно передать дочерним компонентам. Будьте внимательны и не удаляйте пропсы из оригинального объекта this.props, обращайтесь с ним как с иммутабельным.

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === 'horizontal') {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}