【Day6】Props和States之间到底是什麽关系!? 怎麽传怎麽用咧..? o_O ||

这篇要来谈React的states跟Props

States跟Props可以看作是React里面的Attributes (参数)

这边先来看小菜鸟画的一张图 ↓ (虽然前面看过一张类似的，但这张图画得比较清楚一点('・ω・') )

上面可以看到每个类别都有自己的States，从父类别取的父类别的States就是Props了

=> 简而言之小菜鸟我是这样记的 ! 往下传的是States，往上拿的是Props

• 在类别里建立自己的States

  class TestFormController extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
             testState:""
          };
  
      }
  

• 在类别里传自己的States给子类别

    			<TestForm
                      test={this.state.testState}
                  />
  

• 在类别里取得父类别传来的Props (有两种方法)

  1.将所有props透过this取得，并设定成常数(不可修改)

    const {
              test
          } = this.props;
  

  2.直接取得单一个prop

   this.props.test
  

这边作一个小小补充 !!

如果有很多个Class用的都是一样的States的话，可以建立一个JS档案，export function 来回传所有的state栏位

export function createInitialFormState()
	{
        return {
        	testState1: "",
            testState2: "",
        }
    }

在建立States的时候就不用再一个一个写了!
我们可以透过 JS ES6的写法，快速传入多个参数 ! 还记得'...'吗 !? 对~ 就是它

import {
    createInitialFormState,
} from '../initialState/formState';
class CheckUpFormController extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        	...createInitialFormState(),
           testState:""
        };
      
    }

以上!! 我们学会了States及Props之间的关系，
然後也学会了如何建立States并传给别人当Props来使，用，还外加一个快速传参的方法，

有没有感觉离React更近一步了呢 (/◕ヮ◕)/ !?
上一篇Component 是 其中一部分 ，这次一口气讲了剩下两个部分

接下来 下一篇就要开始来用JSX来写写看我们的React了 !!