可转换为数字的字符串的PropType？

Question

是否有接受数字字符串的道具类型？如果我将prop直接传递给DOM元素，它不关心我是否使用prop={1}或prop="1"，但是除了使用自定义回调之外，我如何制作一个接受它的匹配PropType？

我之前问过这个问题，但它作为React PropTypes的副本关闭了：允许一个prop使用不同类型的PropTypes，但我对接受任何字符串都不感兴趣-我只希望字符串被解析为数字。

Answer 1

我只需要解析为数字的字符串。

这是可能的使用自定义验证程序为您的道具。

const App = (props) => {
  return <span>{props.number}</span>
}

App.propTypes = {
  number: function (props, propName, componentName) {
    // Check if not a number.
    if (isNaN(props[propName])) {
      return new Error(
        "Invalid prop `" +
          propName +
          "` supplied to" +
          " `" +
          componentName +
          "`. Validation failed."
      );
    }
  }
}

ReactDOM.render(
  <App number="a" />, // error
  document.getElementById("root")
)

<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>

<div id="root"></div>