反应未知道具警告

Question

我试图用一个 prop 渲染一个 DOM 元素，但我的尝试未被 React 识别为合法的 DOM 属性/属性。

所以我开始研究解决方案，并从React Warning Documentation 找到了这个来源。然而，虽然解释得很好，但我有一个更深层次的问题，因此需要更深层次的解决方案。

作为代码示例我将介绍ExampleContainer方法：

export let ExampleContainer = (props) => {

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

现在我的mapStateToProps 收到了state，我相信它已经很好地实现了，我将把它带到这里只是为了说明我的问题：

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 道具直接传递到某处的<div i18n="whatever" />。

我的猜测是它在您的 DetailsContainer 组件中。如果你像<div {...props} /> 那样将你的组件接收到的所有道具传播到 div 中，那肯定会做到。

现在，当您尝试传递某种不是 DOM 元素标准属性的 prop 类型时，React 会出现警告。如果出于这样的原因需要 i18n 作为属性...HTML tags in i18next translation，您需要将其更改为 data-i18n 作为属性。