html下拉框设置默认值_props验证与设置默认值

107 阅读 0 评论 71 点赞

我是靠谱客的博主务实鸡翅，这篇文章主要介绍html下拉框设置默认值_props验证与设置默认值，现在分享给大家，希望可以做个参考。

1无状态组件props验证与设置默认值

无状态组件props设置默认值

当我们没有给props设置要传的默认值时，不会报错，只是会出现一片空白，影响用户体验，如下例里，只是在接收的时候直接用的props接收，但在调用组件时并没有传初始值过去，所以页面上呈现一片空白。

无状态组件设置默认值，也就是要传的初始值，需要使用defaultProps属性，具体的设置方法就是当前组件名.defaultProps，当前react版本16，如果react版本在15之前那写法有些不同，看下例：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>无状态组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        function Com(props) {            //无状态组件设置默认值需要使用defaultProps属性            return (                <div>我是一个无状态组件，外部传递的数据是：{props.name}div>            )        }        Com.defaultProps = {            name: "我是props中name的默认值"        }        //当前react版本是16,如果react版本是15x,那么这里设置默认值写法有些不同，用||的方式完成        // function Com(props) {        //     props.name=props.name || "我是默认值"        //     return (        //

我是一个无状态组件，外部传递的数据是：{props.name}

// ) // } ReactDOM.render(<Com />, document.getElementById("demoReact"))script>body>html>

运行结果是

如果说进行数据的传递，传递给name一个值，那么就会发现name的默认初始值就会被传递的值替换，如下例：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>无状态组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        function Com(props) {            //无状态组件设置默认值需要使用defaultProps属性            return (                <div>我是一个无状态组件，外部传递的数据是：{props.name}div>            )        }        Com.defaultProps = {            name: "我是props中name的默认值"        }        ReactDOM.render(<Com name="我是要传的name数据" />, document.getElementById("demoReact"))script>body>html>

运行看一下发现，默认值就被要传的值替换掉了，如下：

无状态组件props验证

props验证作用：验证传递进来的数据是否符合我们的期望类型或要求，上线模式中请取消props，更多关于props验证，看官网https://react.docschina.org/docs/typechecking-with-proptypes.html

props验证第一步：引用prop-types库安装命令如下，也能用cnpm

npm install --save prop-types

props验证第二步：

里引入

props验证第三步：使用就是组件名.propTypes

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>无状态组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>    <script src="node_modules/prop-types/prop-types.min.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        function Com(props) {            //无状态组件设置默认值需要使用defaultProps属性            return (                <div>我是一个无状态组件，外部传递的数据是：{props.name}div>            )        }        Com.defaultProps = {            name: "我是props中name的默认值"        }        //props验证作用：验证传递进来的数据是否符合我们的期望类型或要求，上线模式中请取消props        //props验证第一步：引用prop-types库 命令npm install --save prop-types        //props验证第二步：里引入        //props验证第三步：使用就是组件名.propTypes        //更多关于props验证，看官网https://react.docschina.org/docs/typechecking-with-proptypes.html        Com.propTypes = {            name: PropTypes.number //验证name这个props传递进来的数据必须是number类型        }        ReactDOM.render(<Com name="我是name数据" />, document.getElementById("demoReact"))script>body>html>

这里我们期望传进来的数据类型是number,但现在我们传了一个字符串，运行之后，结果如下，然后控制台看到也没报错

但是，当我把引进来的文件从压缩版的min.js改成非压缩版后，也就是改<script src="node_modules/prop-types/prop-types.js">script>

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>无状态组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>    <script src="node_modules/prop-types/prop-types.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        function Com(props) {            //无状态组件设置默认值需要使用defaultProps属性            return (                <div>我是一个无状态组件，外部传递的数据是：{props.name}div>            )        }        Com.defaultProps = {            name: "我是props中name的默认值"        }        Com.propTypes = {            name: PropTypes.number //验证name这个props传递进来的数据必须是number类型        }        ReactDOM.render(<Com name="我是name数据" />, document.getElementById("demoReact"))script>body>html>

这个时候运行就会发现控制台会报错，报错提示期待name为number但现在为字符串，但页面是正常显示。

这个时候我们可以定义一个number类型变量，直接传递这个变量

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>无状态组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>    <script src="node_modules/prop-types/prop-types.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        function Com(props) {            //无状态组件设置默认值需要使用defaultProps属性            return (                <div>我是一个无状态组件，外部传递的数据是：{props.name}div>            )        }        Com.defaultProps = {            name: "我是props中name的默认值"        }        Com.propTypes = {            name: PropTypes.number //验证name这个props传递进来的数据必须是number类型        }        let num = 9527        ReactDOM.render(<Com name={num} />, document.getElementById("demoReact"))script>body>html>

运行结果如下，控制台也不报错了。

2类组件props验证与设置默认值

类组件的props默认值

类组件props设置默认值也是用defaultProps属性，用法与无状态组件类似,也是组件名.defaultProps这样设置，如下例：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>类组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        //类组件props默认值也是用defaultProps        class Com extends React.Component {            render() {                return (                    <div>                        我是类组件---{this.props.name}                    div>                )            }        }        Com.defaultProps = {            name: "我是默认值"        }        ReactDOM.render(<Com name="传递的name数据" />, document.getElementById("demoReact"))script>body>html>

当给调用的组件传有数据时，它会替换掉我们设置的默认值，运行结果如下：

类组件props验证

类组件props验证与无状态组件props验证用法，步骤一样，先命令安装再引入再使用，看下例：

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>类组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>    <script src="node_modules/prop-types/prop-types.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        //类组件props默认值也是用defaultProps        class Com extends React.Component {            render() {                return (                    <div>                        我是类组件---{this.props.name}                    div>                )            }        }        Com.defaultProps = {            name: "我是默认值"        }        //props验证        Com.propTypes = {            name: PropTypes.number        }        ReactDOM.render(<Com name="传递的name数据" />, document.getElementById("demoReact"))script>body>html>

上例里期待name为number，但这里我们传了个字符串，最后运行结果如下：

我们只需要传递一个number类型的数据就好了

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>类组件里的props验证与默认值title>    <script src="node_modules/react/umd/react.development.js">script>    <script src="node_modules/react-dom/umd/react-dom.development.js">script>    <script src="node_modules/babel-standalone/babel.min.js">script>    <script src="node_modules/prop-types/prop-types.js">script>head><body>    <div id="demoReact">div>    <script type="text/babel">        //类组件props默认值也是用defaultProps        class Com extends React.Component {            render() {                return (                    <div>                        我是类组件---{this.props.name}                    div>                )            }        }        Com.defaultProps = {            name: "我是默认值"        }        //props验证        Com.propTypes = {            name: PropTypes.number        }        let nametext = 123        ReactDOM.render(<Com name={nametext} />, document.getElementById("demoReact"))script>body>html>

运行结果是