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

Попередження про наявність невідомого пропа з’являються, коли ви намагаєтесь відобразити DOM-елемент з пропом, що не може бути визначений React, як валідний атрибут або властивість. Ви повинні переконатись у тому, що DOM-елемент помилково не отримав пропси.

\n

Існує декілька можливих причин, через які це попередження може з’явитись:

\n
    \n
  1. Можливо ви використовуєте {...this.props} або cloneElement(element, this.props)? Ваш компонент передає власні пропси безпосередньо до дочірнього компонента (див. Компоненти і пропси). У цьому випадку потрібно переконатись у тому, що пропси, призначенні лише для батьківського компонента, не потрапляють до дочірнього.
    2. \n
  2. Ви використовуєте нестандартний DOM-атрибут на нативному 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

Добре: Spread-оператор може бути використаний для деструктурізації поля об’єкту та визначення його, як окремої змінної.

\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":[]}