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，我已经很好地实施了，我会把它带到这里，只是为了解决我的问题：

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中，就像<div {...props} />一样，那肯定会这样做。

当你试图传递一些不是DOM元素的标准属性的道具时，React现在有警告。如果由于某种原因需要i18n作为属性... HTML tags in i18next translation，您将要将其更改为data-i18n作为道具。

反应未知道具警告

1 个答案: