React Unknown Prop Warning

Question

Я пытался визуализировать элемент DOM с помощью опоры, но моя попытка не признана React как законным атрибутом DOM/свойством.

Итак, я начал изучать решение, и я нашел этот источник от React Warning Documentation. Однако, хотя это хорошо объяснено, у меня есть более глубокая проблема, которая потребует более глубокого решения.

В качестве примера кода, который я представлю ExampleContainer метод:

export let ExampleContainer = (props) => { 

    return (
     <DetailsContainer tabs={props.tabs} activeTab={props.activeTab}> 
      {props.children} 
     </DetailsContainer> 
    ) 
} 

Теперь у меня есть мой mapStateToProps, получающего state, что я beleave хорошо реализован, и я принесу его сюда только контекст моей проблемы:

const mapStateToProps = (state) => { 
    return { 
    i18n: state.i18n, 
    activeTab : state.example.activeTab 
    } 
} 

Наконец, проблема в моем mergeProps где у меня есть этот tabs источник дает мне проблему и более специфически внутри него на i18n атрибут:

const mergeProps = (stateProps, dispatchProps, ownProps) => { 
    return Object.assign({}, ownProps, { 
    tabs: [ 
     { 
     'onClick' : dispatchProps.goToExampleOptionA, 
     'key' : 'ExampleOptionA', 
     'i18n' : stateProps.i18n.Tabs.exampleOptionATab 

     }, 
     { 
     'onClick' : dispatchProps.goToExampleOptionB, 
     'key' : 'ExampleOptionB', 
     'i18n' : stateProps.i18n.Tabs.exampleOptionBTab 
     } 
    ] 
    }, stateProps) 
} 

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

И мой DeyailsContainer компонент это один:

let DetailsContainer = ({ 
    tabs, 
    rightIcons, 
    activeTab, 
    children 
}) => { 
    return (
     <div> 
      <Tabs tabs={tabs} rightIcons={rightIcons} activeTab={activeTab}/> 
      <div className="app-wrapper"> 
       {children} 
      </div> 
     </div> 
    ) 
} 

Answer 1

Это связано с тем, что вы пропустите свой i18n prop прямо в <div i18n="whatever" />.

Я предполагаю, что это находится в вашем компоненте DetailsContainer. Если вы распространяете все реквизиты, которые ваш компонент получает в div, как этот <div {...props} />, это определенно сделает это.

У React есть предупреждения, когда вы пытаетесь передать некоторый тип опоры, который не является стандартным атрибутом для элемента DOM. Если вам нужен i18n в качестве атрибута по такой причине ... HTML tags in i18next translation, вы хотите изменить это на data-i18n в качестве опоры.