{"componentChunkName":"component---src-templates-docs-js","path":"/warnings/unknown-prop.html","result":{"data":{"markdownRemark":{"html":"

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

\n

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

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

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

\n

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

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

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

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

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

\n
function MyDiv(props) {\n\n  const divProps = Object.assign({}, props);\n  delete divProps.layout;\n\n  if (props.layout === 'horizontal') {\n    return <div {...divProps} style={getHorizontalStyle()} />\n  } else {\n    return <div {...divProps} style={getVerticalStyle()} />\n  }\n}
","frontmatter":{"title":"Предупреждение: неизвестный проп","next":null,"prev":null},"fields":{"path":"content/warnings/unknown-prop.md","slug":"warnings/unknown-prop.html"}}},"pageContext":{"slug":"warnings/unknown-prop.html"}},"staticQueryHashes":[]}