xgqfrms-GitHub/class-components-props-function(props).md

## class-components-props-function(props).md

      
    Raw
  

              class-components-props-function(props).md
            
          
    Raect Components props in deepth

https://facebook.github.io/react/docs/react-component.html#setstate
Class Component this.props.onClickFunction !== Function Component props.onClickFunction


this.props 是自己的特有属性，props 除了包含自己所有的属性，还包含从父级组件继承的属性


class components props & this.props.onClickFunction


function components (props) & no need this

// https://facebook.github.io/react/docs/react-component.html#setstate


// class props & this.props.onClickFunction

class PropsTest extends React.Component{
    render() {
        return (
            <div>
                <button onClick={this.props.onClickFunction} >
                    Add counter
                </button>
                <p>
                    this state is 
                    <span 
                        style={{color: "#0ff", fontSize: "32px"}}
                        >
                        {this.props.counter}
                    </span>
                </p>
            </div>
        );
    };
};

// function props & no need this

const Test = (props) =>{
    return (
        <div>
            <button onClick={props.onClickFunction} >
                Add `props` counter
            </button>
            <p
                style={{color: "#0ff", fontSize: "32px"}}
                >
                {props.counter}
            </p>
        </div>
    );
};


class App extends React.Component{
    state = {
        counter: 1
    };
    addCounter = () => {
        this.setState(
          (prevState) => (
              {
                  counter: prevState.counter + 1
              }
          )
        );
    };
    render(){
        return(
            <div>
                <PropsTest 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
                <Test 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
            </div>
        );
    }
}


export default App;

const props = {
    name: "xgqfrms",
    age: 17
};

ReactDOM.render(
    <div>
        <App {...props}/>
    </div>
    , mountNode
);