使用context传递数据

4 years ago · 2e402da94d
4 changed files with 61 additions and 13 deletions
--- a/.eslintcache
+++ b/.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","/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js":"6","/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js":"7","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js":"8","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js":"9","/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js":"10"},{"size":504,"mtime":1608691297173,"results":"11","hashOfConfig":"12"},{"size":362,"mtime":1608686231931,"results":"13","hashOfConfig":"12"},{"size":665,"mtime":1608710449381,"results":"14","hashOfConfig":"12"},{"size":445,"mtime":1608688160052,"results":"15","hashOfConfig":"12"},{"size":690,"mtime":1608692357096,"results":"16","hashOfConfig":"12"},{"size":763,"mtime":1608694717412,"results":"17","hashOfConfig":"12"},{"size":966,"mtime":1608697632407,"results":"18","hashOfConfig":"12"},{"size":1266,"mtime":1608705133968,"results":"19","hashOfConfig":"12"},{"size":1122,"mtime":1608709964056,"results":"20","hashOfConfig":"12"},{"size":606,"mtime":1608709004865,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"1r5rxns",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"31"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["45","46"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",[],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["47","48"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],["49","50"],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["51"],"/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js",[],{"ruleId":"52","replacedBy":"53"},{"ruleId":"54","replacedBy":"55"},{"ruleId":"52","replacedBy":"56"},{"ruleId":"54","replacedBy":"57"},{"ruleId":"52","replacedBy":"58"},{"ruleId":"54","replacedBy":"59"},{"ruleId":"60","severity":1,"message":"61","line":15,"column":22,"nodeType":"62","endLine":15,"endColumn":32},"no-native-reassign",["63"],"no-negated-in-lhs",["64"],["63"],["64"],["63"],["64"],"react/no-direct-mutation-state","Do not mutate state directly. Use setState().","MemberExpression","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","/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js":"7","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js":"8","/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js":"9","/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js":"10","/home/blobt/Documents/dev/node/study_react/src/theme-context.js":"11","/home/blobt/Documents/dev/node/study_react/src/components/ThemedBar.js":"12"},{"size":504,"mtime":1608691297173,"results":"13","hashOfConfig":"14"},{"size":362,"mtime":1608686231931,"results":"15","hashOfConfig":"14"},{"size":1084,"mtime":1608712766652,"results":"16","hashOfConfig":"14"},{"size":445,"mtime":1608688160052,"results":"17","hashOfConfig":"14"},{"size":690,"mtime":1608692357096,"results":"18","hashOfConfig":"14"},{"size":763,"mtime":1608694717412,"results":"19","hashOfConfig":"14"},{"size":966,"mtime":1608697632407,"results":"20","hashOfConfig":"14"},{"size":1266,"mtime":1608705133968,"results":"21","hashOfConfig":"14"},{"size":1122,"mtime":1608709964056,"results":"22","hashOfConfig":"14"},{"size":606,"mtime":1608709004865,"results":"23","hashOfConfig":"14"},{"size":105,"mtime":1608711107330,"results":"24","hashOfConfig":"14"},{"size":894,"mtime":1608712315164,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"1r5rxns",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"35"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"38"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"47"},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"47"},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["54","55"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",[],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["56","57"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],["58","59"],"/home/blobt/Documents/dev/node/study_react/src/components/LikesButton.js",["60"],"/home/blobt/Documents/dev/node/study_react/src/components/DigitalClock.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/CommentBox2.js",[],["61","62"],"/home/blobt/Documents/dev/node/study_react/src/components/CommentList.js",[],"/home/blobt/Documents/dev/node/study_react/src/theme-context.js",[],"/home/blobt/Documents/dev/node/study_react/src/components/ThemedBar.js",[],{"ruleId":"63","replacedBy":"64"},{"ruleId":"65","replacedBy":"66"},{"ruleId":"63","replacedBy":"67"},{"ruleId":"65","replacedBy":"68"},{"ruleId":"63","replacedBy":"69"},{"ruleId":"65","replacedBy":"70"},{"ruleId":"71","severity":1,"message":"72","line":15,"column":22,"nodeType":"73","endLine":15,"endColumn":32},{"ruleId":"63","replacedBy":"74"},{"ruleId":"65","replacedBy":"75"},"no-native-reassign",["76"],"no-negated-in-lhs",["77"],["76"],["77"],["76"],["77"],"react/no-direct-mutation-state","Do not mutate state directly. Use setState().","MemberExpression",["76"],["77"],"no-global-assign","no-unsafe-negation"]
--- a/src/App.js
+++ b/src/App.js
@ -1,28 +1,42 @@
 import './App.css';
 import React from 'react';
-import CommentList from './components/CommentList';
-import CommentBox2 from './components/CommentBox2';
-
+import ThemeContext from './theme-context';
+import ThemedBar from './components/ThemedBar';
+const themes = {
+  light: {
+    className: 'btn btn-primary',
+    bgColor: '#eeeeee',
+    color: '#000'
+  },
+  dark: {
+    className: 'btn btn-light',
+    bgColor: '#222222',
+    color: '#fff'
+  }
+}
 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      comments: ['this is my first line']
+      theme: 'light'
    }
-    this.add = this.add.bind(this);
+    this.changeTheme = this.changeTheme.bind(this);
  }
-  add(comment) {
+  changeTheme(text){
+    //console.log(text);
    this.setState({
-      comments: [...this.state.comments, comment]
+      theme: text
    });
  }
  render() {
-    const { comments } = this.state;
    return (
-      <div>
-        <CommentList comments={comments} />
-        <CommentBox2 onAdd={this.add} count={comments.length} />
-      </div>
+      <ThemeContext.Provider value={themes[this.state.theme]}>
+        <div className="App">
+          <a href="#theme-switcher" className="btn btn-light" onClick={() => {this.changeTheme('light')}}>浅色主题</a>
+          <a href="#theme-switcher" className="btn btn-secondary" onClick={() => {this.changeTheme('dark')}}>深色主题</a>
+          <ThemedBar />
+        </div>
+      </ThemeContext.Provider>
    )
  }
 }
--- a/src/components/ThemedBar.js
+++ b/src/components/ThemedBar.js
@ -0,0 +1,29 @@
+import React from 'react';
+import ThemeContext from '../theme-context';
+
+class ThemedBar extends React.Component {
+
+    render() {
+        return (
+            <ThemeContext.Consumer>
+                {
+                    theme => {
+                        return (
+                            <div
+                                className="alert mt-5"
+                                style={
+                                    { backgroundColor: theme.bgColor, color: theme.color }
+                                }
+                            >
+                                样式区域
+                                <button className={theme.className}>样式按钮</button>
+                            </div>
+                        )
+                    }
+                }
+            </ThemeContext.Consumer>
+        )
+    }
+}
+
+export default ThemedBar;
--- a/src/theme-context.js
+++ b/src/theme-context.js
@ -0,0 +1,5 @@
+import React from 'react';
+
+const ThemeContext = React.createContext();
+
+export default ThemeContext;