02/05-props的用法

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //props用于接受组件的属性的对象
   class MyApp extends React.Component{
    //必须要设置render函数
     render() {
       return (
         <div>
            <h1>{this.props.title}</h1>
            {/* JSX中在页面上不显示的数据有：undefined,null,true,false*/}
            <p>{this.props.content}</p>
            <p>{null}</p>
            <p>{true}</p>
            <p>{false}</p>
            <p>{NaN}</p> {/*有结果，NaN */}
            <p>{this.props.content}</p> {/*有结果，NaN */}
            <p>{this.props.arr}</p>{/*数组在jsx中会自动展开，aaabbbccc */}
            <p>{this.props.obj.name}</p>{/*对象在jsx中不会自动展开，会报错，只能去对象的值不会报错 */}
          </div>
       )
     }
   }
   //props用于父组件给子组件传递数据的，自上而下传，可以传递任何数据（string,number,boolean.num,undefined,object（object包括Array和function）)
    ReactDOM.render(
      <MyApp title="app标题" content={23} arr={['aaa','bbb','ccc']} obj={{name:'lili',age:12}} />,document.getElementById('root'))
   
    </script>

06-组件组合

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //props用于接受组件的属性的对象
   class App extends React.Component{
    //必须要设置render函数

    //fn本质上实在App.prototype上，new App()的时候就能调用到fn,this就能找找到fn
    fn(a){
         alert(a)
       }
     render() {
         
       return (
         <div>
            <h1>App标题</h1>
            {/*属性命名用驼峰*/}
            <Child myContent={this.props.content} show={this.fn}></Child>
          </div>
       )
     }
   }

//child也是继承react.Component不是继承App  App里的值会自己传过来
//对child来说，他传过来的属性是myContent
//传函数对象会有this问题
   class Child extends React.Component{
     //定义render函数
     render(){
       //定义Child模板
       return(<section>
        <p>{this.props.myContent}</p>
        {/*通过这种方式可以把子组件的值传给父组，通过函数对象*/}
        <button onClick={()=>{this.props.show('hello,i am child')}}>子组件内容...</button>
        </section>)
     }
   }

    ReactDOM.render(
      <App  content='传递给Child的内容'/>,document.getElementById('root'))
   


      //组件的调用过程
      //1）调用ReactDOM.render函数，把组件上的属性转为JSON对象
      //2）class创建实例对象  把JSON对象给props属性
      //3）通过创建的实例，调用render函数，得到jsx对象
      //4）reactDOM会将render函数返回值生成虚拟DOM渲染到页面上 render返回值会替换到组件
    </script>

07-props的默认值设置

 <div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //props用于接受组件的属性的对象
   class App extends React.Component{

     render() {
         //没有设置title值就为undefind  不展示。但可以有属性默认值
       return (
         <div>
            <h1>{this.props.title}</h1>
            <h1>{this.props.content}</h1>
          </div>
       )
     }
   }
//属性的默认值
//对于函数式组件和React.Component组件，定义属性默认值的方式为：在类名上定义一个属性defalutProps
//函数式组件也一样，只不过类名变为函数名
//没有值用默认值，有值就用值不用默认值
App.defaultProps={
  title:'hello,world', //默认的属性值
  content:'aaaa'
}
    ReactDOM.render(
      <div><App  content='传递给Child的内容'/></div>,document.getElementById('root'))
   
    </script>

08-props的默认值设置

<div id='root'></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.min.js"></script>
    <script type="text/babel">
    //props用于接受组件的属性的对象
   const App = React.createClass({
     //react.createClass多一种设置默认值得方法
    getDefaultProps(){
      return {
        title:'hello,world'
      }
    },
     render() {
         //没有设置title值就为undefind  不展示。但可以有属性默认值
       return (
         <div>
            <h1>{this.props.title}</h1>
            <h1>{this.props.content}</h1>
          </div>
       )
     }
   })
//属性的默认值
//对于函数式组件和React.Component组件，定义属性默认值的方式为：在类名上定义一个属性defalutProps
//函数式组件也一样，只不过类名变为函数名
//没有值用默认值，有值就用值不用默认值
// App.defaultProps={
//   title:'hello,world', //默认的属性值
//   content:'aaaa'
// }
    ReactDOM.render(
      <div><App  content='传递给Child的内容'/></div>,document.getElementById('root'))
   
    </script>