{"id":298,"date":"2021-09-22T20:54:57","date_gmt":"2021-09-22T12:54:57","guid":{"rendered":"http:\/\/gjweb.top\/?p=298"},"modified":"2021-09-22T20:54:58","modified_gmt":"2021-09-22T12:54:58","slug":"%e7%bb%84%e4%bb%b6%e9%97%b4%e4%bc%a0%e5%80%bc%e8%af%a6%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=298","title":{"rendered":"\u7ec4\u4ef6\u95f4\u4f20\u503c\u8be6\u89e3"},"content":{"rendered":"\n

\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c<\/h2>\n\n\n\n
import React from \"react\"
\/*\u7236\u7ec4\u4ef6*\/
class Father extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
          count:0
        }
    }
    handleAdd = ()=>{
        this.setState({
            count:this.state.count + 1
        })
    }
    render(){
        return(
            <div>
                \u7236\u5b50\u4f20\u503c
                <button onClick={this.handleAdd}>\u52a0\u4e00<\/button>
               <Child count={this.state.count}\/>
            <\/div>
        )
    }
}
\/*\u5b50\u7ec4\u4ef6*\/
const Child = (props)=>{
    return(
        <div>\u5b50\u7ec4\u4ef6\u63a5\u6536 {props.count}<\/div>
    )
}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u5b50\u7236\u7ec4\u4ef6\u4f20\u503c<\/h2>\n\n\n\n
import React from \"react\"
\/*\u7236\u7ec4\u4ef6*\/
class Father extends React.Component{
    constructor(){
        super()
        this.state = {
            getChildCount:0
        }
    }
    getCount = (data)=>{
        this.setState({
            getChildCount:data
        })
    }
    render(){
        return(
            <div>
                \u5b50\u7ec4\u4ef6\u4f20\u53c2 {this.state.getChildcount}
                <Child getCount={this.getCount}\/>
            <\/div>
        )
    }
}
\/*\u5b50\u7ec4\u4ef6*\/
class Child extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            count:0
        }
    }
    handelAdd = ()=>{
        this.setState((state)=>{
            let newValue = state.count + 1 
            this.props.getCount(newValue)
            return{
                count:newValue
            }
        })
    }
    render(){
        return(
            <div>
                \u5b50\u7ec4\u4ef6
                <button onClick={this.handelAdd}>\u52a0\u4e00<\/button>
            <\/div>
        )
    }
}<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u5144\u5f1f\u7ec4\u4ef6\u4f20<\/h2>\n\n\n\n
\u5144\u5f1f\u7ec4\u4ef6\u4f20\u503c\uff0c\u5b8c\u6210\u601d\u8def\u5728\u4e8e\u628a\u6240\u6709\u7684\u72b6\u6001\u653e\u5728\u7236\u7ec4\u4ef6\u4e0a\uff0c\u4e24\u4e2a\u5144\u5f1f\u7ec4\u4ef6\u901a\u8fc7\u7236\u5b50\u3001\u5b50\u7236\u4f20\u503c\u7684\u65b9\u6cd5\uff0c\u5b9e\u73b0\u5144\u5f1f\u7ec4\u4ef6\u4e4b\u95f4\u7684\u901a\u4fe1\u3002<\/p>\n\n\n\n
import React from \"react\"
class Father extends React.Component {
    constructor(props){
        super(propss)
        this.state = {
            count:0
        }
    }
    getCount = (data)=>{
        this.setState((state)=>{
            return{
                count:state.count + data
            }
        })
    }
    render(){
        return{
            <div>
                \u5144\u5f1f\u7ec4\u4ef6\u4f20\u503c
                <Child count={this.state.count}\/>
                <Child2 getCount={this.getCount}\/>
            <\/div>
        }
    }
}
\u200b
class Child extends React.Component {
    constructor(props){
        super(props)
    }
    render(){
        return{
            <div>
                <div>\u5b50\u7ec4\u4ef6\u4e00<\/div>
                <div>\u8ba1\u6570\u5668\uff1a{this.props.count}<\/div>
            <\/div>
        }
    }
}
\u200b
class Child2 extends React.Component {
    constructor(props){
        super(props)
    }
    handelAdd = ()=>{
        this.props.getCount(1)
    }
    render(){
        return{
            <div>
                <div>\u5b50\u7ec4\u4ef6\u4e8c<\/div>
                <button onClick={this.handelAdd}>\u52a0\u4e00<\/button>
            <\/div>
        }
    }
}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u7236\u5b50\u7ec4\u4ef6\u4f20\u503c \u5b50\u7236\u7ec4\u4ef6\u4f20\u503c \u5144\u5f1f\u7ec4\u4ef6\u4f20 \u5144\u5f1f\u7ec4\u4ef6\u4f20\u503c\uff0c\u5b8c\u6210\u601d\u8def\u5728\u4e8e\u628a\u6240\u6709\u7684\u72b6\u6001\u653e\u5728\u7236\u7ec4\u4ef6\u4e0a\uff0c\u4e24\u4e2a\u5144\u5f1f\u7ec4\u4ef6\u901a\u8fc7\u7236 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-298","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=298"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/298\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}