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：版本：道具类型：15.7.2，反应：16.9.0

Answer 1

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

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

发展

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>

道具类型oneOf允许所有字符串

1 个答案: