如果您尝试使用不被React识别的道具作为合法的DOM属性/属性来渲染DOM元素，那么unknown-prop警告将触发。你应该确保你的DOM元素没有虚假的道具。
这个警告可能会出现几个可能的原因：
{...this.props}或cloneElement(element, this.props)？您的组件直接将其自己的道具转移到子元素（例如https://reactjs.org/docs/transferring-props.html）。将道具转移到儿童组件时，应确保您不会意外地转发旨在由父组件解释的道具。为了解决这个问题，复合组件应该“消耗”用于复合组件的任何道具，而不是用于子组件。例：
不好：意外的layout道具被转发到div标签。
function MyDiv(props) { if (props.layout === ‘horizontal‘) { // BAD! Because you know for sure "layout" is not a prop that <div> understands. return <div {...props} style={getHorizontalStyle()} /> } else { // BAD! Because you know for sure "layout" is not a prop that <div> understands. return <div {...props} style={getVerticalStyle()} /> } }
好：扩展运算符可以用来从道具上拉出变量，并把剩下的道具放到一个变量中。
function MyDiv(props) { const { layout, ...rest } = props if (layout === ‘horizontal‘) { return <div {...rest} style={getHorizontalStyle()} /> } else { return <div {...rest} style={getVerticalStyle()} /> } }
好：您还可以将道具分配给新对象，并从新对象中删除正在使用的按键。确保不要从原始this.props对象中删除道具，因为该对象应该被认为是不可变的。
function MyDiv(props) { const divProps = Object.assign({}, props); delete divProps.layout; if (props.layout === ‘horizontal‘) { return <div {...divProps} style={getHorizontalStyle()} /> } else { return <div {...divProps} style={getVerticalStyle()} /> } }
原文：https://www.cnblogs.com/passkey/p/10212471.html