组件的state

.eslintcache

@@ -1 +1 @@
-[{"/home/blobt/Documents/dev/node/study_react/src/index.js":"1","/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js":"2","/home/blobt/Documents/dev/node/study_react/src/App.js":"3","/home/blobt/Documents/dev/node/study_react/src/Weclome.js":"4","/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js":"5"},{"size":504,"mtime":1608691297173,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1608686231931,"results":"8","hashOfConfig":"7"},{"size":299,"mtime":1608692378661,"results":"9","hashOfConfig":"7"},{"size":445,"mtime":1608688160052,"results":"10","hashOfConfig":"7"},{"size":690,"mtime":1608692357096,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1r5rxns",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["24","25"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",["26"],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["27","28"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","severity":1,"message":"34","line":1,"column":8,"nodeType":"35","messageId":"36","endLine":1,"endColumn":12},{"ruleId":"29","replacedBy":"37"},{"ruleId":"31","replacedBy":"38"},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar",["39"],["40"],"no-global-assign","no-unsafe-negation"]
+[{"/home/blobt/Documents/dev/node/study_react/src/index.js":"1","/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js":"2","/home/blobt/Documents/dev/node/study_react/src/App.js":"3","/home/blobt/Documents/dev/node/study_react/src/Weclome.js":"4","/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js":"5","/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js":"6"},{"size":504,"mtime":1608691297173,"results":"7","hashOfConfig":"8"},{"size":362,"mtime":1608686231931,"results":"9","hashOfConfig":"8"},{"size":373,"mtime":1608693565331,"results":"10","hashOfConfig":"8"},{"size":445,"mtime":1608688160052,"results":"11","hashOfConfig":"8"},{"size":690,"mtime":1608692357096,"results":"12","hashOfConfig":"8"},{"size":678,"mtime":1608694636928,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"1r5rxns",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"23"},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["28","29"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",["30"],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["31","32"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["33"],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":1,"column":8,"nodeType":"40","messageId":"41","endLine":1,"endColumn":12},{"ruleId":"34","replacedBy":"42"},{"ruleId":"36","replacedBy":"43"},{"ruleId":"44","severity":1,"message":"45","line":14,"column":22,"nodeType":"46","endLine":14,"endColumn":32},"no-native-reassign",["47"],"no-negated-in-lhs",["48"],"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar",["47"],["48"],"react/no-direct-mutation-state","Do not mutate state directly. Use setState().","MemberExpression","no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,11 +1,13 @@
 import logo from './logo.svg';
 import './App.css';
 import NameCard from './components/NameCard';
+import LikesButton from './components/LikesButton';
 const tags = ['php','cpp','js'];
 function App() {
   return (
     <div className="App">
       <NameCard name="blobt" number={15920229676} isHuman={1} tags={tags}/>
+      <LikesButton />
     </div>
   );
 }

src/components/LikesButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+
+class LikesButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            count: 0
+        }
+        this.increase = this.increase.bind(this)
+    }
+    increase(){
+        this.setState({
+            count: ++this.state.count
+        })
+    }
+    render() {
+        return (
+            <div className="likes-button-component">
+                <button onClick={this.increase} type="button" className="btn btn-outline-primary btn-lg">
+                    点赞{this.state.count}
+                </button>
+            </div>
+        )
+    }
+}
+
+export default LikesButton;