react学习---day03--限制props的数据

props让传值变得优雅,但是如果有时我并没有传入该值,我希望有一个默认值(类似于vue的filter)

首先有两个组件的渲染源

      <div id="app1"></div>
      <div id="app2"></div>

然后是render函数

class App extends React.Component {
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>{name}</li>
                <li>{age}</li>
                <li>{sex}</li>
            </ul>
        )
    }
}
// 对props进行类型以及必填属性的限制
App.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
}
// 对props指定默认值
App.defaultProps = {
    sex: "女",
    age: 16,
}
const person = {
    name: "张三",
    age: 18,
    sex: "男",
}
ReactDOM.render(<App {...person} />, document.getElementById("app1"))
ReactDOM.render(<App name="李四" />, document.getElementById("app2"))

其中需要注意的是在React16版本之后React本身已经不支持直接React.PropTypes了,需要再导入一个prop-types的js包

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

具体的props限制有很多方法可以参考react官方文档  https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

其中还有一种方法是将限制对象放入class类里面

class App extends React.Component {
    // 对props进行类型以及必填属性的限制,当限制类型为函数的时候记得函数是func为了避免与其他关键字起冲突
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        sex: PropTypes.string,
    }
    // 对props指定默认值
    static defaultProps = {
        sex: "女",
        age: 16,
    }
    render() {
        const { name, age, sex } = this.props
        return (
            <ul>
                <li>{name}</li>
                <li>{age}</li>
                <li>{sex}</li>
            </ul>
        )
    }
}

static将propTypes绑定到了类上面,属于类的静态方法,只有类可以调用,而不是类的实例的方法,与typescript中的static有异曲同工之妙