prop-types oneOf 允许所有字符串

Question

export default function New(props: any) {
const { orientation } = props
    return (
        <React.Fragment>
        {orientation === 'horizontal' ? <HorizontalNew {...props} /> : <VerticalNew {...props} />
        </React.Fragment>
    )
}
New.propTypes = {
orientation: PropTypes.oneOf(['vertical', 'horizontal'])}

你好！ 我试图搜索 propTypes 的 oneOf 函数，但在每个地方都说你可以在那里定义要验证的字符串，所以在这种情况下，我认为方向只允许“垂直”或“水平”，但会占用所有字符串的值，我可以从字面上使用任何字符串和作品。 这是任何类型的错误还是我错过了什么？ 谢谢！

PS1：对不起我的英语不好

PS2：版本：prop-types：15.7.2，react：16.9.0

Answer 1

这可能是由于使用了 React 的缩小版 production 构建，而不是 development 构建。使用缩小的 production 构建将抑制警告。要查看警告，请使用 React 的 development 构建。

这里有两个示例，使用development 构建（有错误）和production 构建（有no 错误）。

发展

const HorizontalNew = () => 'Horizontal'
const VerticalNew = () => 'VerticalNew'

const New = (props) => {
  const { orientation } = props
  return (
    <div>
      {orientation === 'horizontal' ?
        <HorizontalNew {...props} /> :
        <VerticalNew {...props} />
      }
    </div>
  )
}

New.propTypes = {
  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
}

ReactDOM.render(<New orientation="diagonal"/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.js"></script>

<div id="app"></div>

生产

const HorizontalNew = () => 'Horizontal'
const VerticalNew = () => 'VerticalNew'

const New = (props) => {
  const { orientation } = props
  return (
    <div>
      {orientation === 'horizontal' ?
        <HorizontalNew {...props} /> :
        <VerticalNew {...props} />
      }
    </div>
  )
}

New.propTypes = {
  orientation: PropTypes.oneOf(['vertical', 'horizontal'])
}

ReactDOM.render(<New orientation="diagonal"/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>

<div id="app"></div>