React16入门4-Props

state 和 props 主要的区别在于props是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    function HelloTo(props){
        return <h2>Hello {props.name}</h2>;
    }
    
    ReactDOM.render(
        <HelloTo name="Jack"/>,
        document.getElementById('example')
    );


</script>


<div id="example"></div>

也可以可以通过组件类的defaultProps属性为props设置默认值

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    class HelloTo extends React.Component {
        render() {
            return (
                <h1>Hello, {this.props.name}</h1>
                );
            }
    }
     
    HelloTo.defaultProps = {
        name: 'Jack'
    };
    
    ReactDOM.render(
        <HelloTo />,
        document.getElementById('example')
    );

</script>

<div id="example"></div>

可以在父组件中设置state， 并通过在子组件上使用props将其传递到子组件上

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>


<script type="text/babel">
    
    class Person extends React.Component {
        constructor() {
            super();
            this.state = {
                name: "Jack",
                sex: "man"
            }
        }
        
        render() {
            return (
                <div>
                    <Name name={this.state.name} />
                    <Sex sex={this.state.sex} />
                </div>
            );
        }
    }
    
    class Name extends React.Component {
        render() {
            return (
                <p>{this.props.name}</p>
                );
        }
    }
     
    class Sex extends React.Component {
        render() {
            return (
                  <p>{this.props.sex}</p>
                  );
        }
    }
     
    ReactDOM.render(
        <Person />,
        document.getElementById('example')
    );
    
</script>


<div id="example"></div>

Props 验证

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。
React v15.5 版本后的PropTypes已经移到了 prop-types 库

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>


<script type="text/babel">
    class HelloTo extends React.Component {
        render() {
            return (
                <h1>Hello, {this.props.name}</h1>
                );
            }
    }
    
    HelloTo.propTypes = {
        name: PropTypes.string
    };
    //故意赋值数字类型
    HelloTo.defaultProps = {
        name: 12345
    };
    ReactDOM.render(
        <HelloTo />,
        document.getElementById('example')
    );


</script>

<div id="example"></div>

查看avaScript 控制台可以看到会抛出警告 提示类型不对