context使用

4 years ago · dd81280d70
3 changed files with 39 additions and 3 deletions
--- a/.eslintcache
+++ b/.eslintcache
@ -1 +1 @@
-[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8"},{"size":500,"mtime":1608887700017,"results":"9","hashOfConfig":"10"},{"size":425,"mtime":1608882568140,"results":"11","hashOfConfig":"10"},{"size":226,"mtime":1609134973403,"results":"12","hashOfConfig":"10"},{"size":627,"mtime":1609135687431,"results":"13","hashOfConfig":"10"},{"size":1138,"mtime":1609126836504,"results":"14","hashOfConfig":"10"},{"size":777,"mtime":1608947625775,"results":"15","hashOfConfig":"10"},{"size":535,"mtime":1608965352064,"results":"16","hashOfConfig":"10"},{"size":485,"mtime":1608970157307,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"46l3t",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"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":"31"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["36","37"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["38"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["39","40"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["41","42"],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":13,"column":8,"nodeType":"49","endLine":13,"endColumn":10,"suggestions":"50"},{"ruleId":"43","replacedBy":"51"},{"ruleId":"45","replacedBy":"52"},{"ruleId":"47","severity":1,"message":"53","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12},{"ruleId":"47","severity":1,"message":"55","line":14,"column":8,"nodeType":"54","endLine":14,"endColumn":12,"suggestions":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["59"],["57"],["58"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["60"],"no-global-assign","no-unsafe-negation",{"desc":"61","fix":"62"},{"desc":"63","fix":"64"},"Update the dependencies array to be: [data]",{"range":"65","text":"66"},"Update the dependencies array to be: [url]",{"range":"67","text":"68"},[280,282],"[data]",[415,419],"[url]"]
+[{"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx":"1","/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts":"2","/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx":"3","/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx":"4","/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx":"5","/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx":"6","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx":"7","/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx":"8","/home/blobt/Documents/dev/node/study_react_ts/src/components/ContextText.tsx":"9"},{"size":500,"mtime":1608887700017,"results":"10","hashOfConfig":"11"},{"size":425,"mtime":1608882568140,"results":"12","hashOfConfig":"11"},{"size":683,"mtime":1609139788949,"results":"13","hashOfConfig":"11"},{"size":627,"mtime":1609135687431,"results":"14","hashOfConfig":"11"},{"size":1138,"mtime":1609126836504,"results":"15","hashOfConfig":"11"},{"size":777,"mtime":1608947625775,"results":"16","hashOfConfig":"11"},{"size":535,"mtime":1608965352064,"results":"17","hashOfConfig":"11"},{"size":485,"mtime":1608970157307,"results":"18","hashOfConfig":"11"},{"size":314,"mtime":1609140023568,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"46l3t",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react_ts/src/index.tsx",[],["40","41"],"/home/blobt/Documents/dev/node/study_react_ts/src/reportWebVitals.ts",[],"/home/blobt/Documents/dev/node/study_react_ts/src/App.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/Hello.tsx",["42"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/LikeButton.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/components/MouseTracker.tsx",[],["43","44"],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useMousePosition.tsx",[],"/home/blobt/Documents/dev/node/study_react_ts/src/hooks/useURLLoader.tsx",["45","46"],"/home/blobt/Documents/dev/node/study_react_ts/src/components/ContextText.tsx",[],{"ruleId":"47","replacedBy":"48"},{"ruleId":"49","replacedBy":"50"},{"ruleId":"51","severity":1,"message":"52","line":13,"column":8,"nodeType":"53","endLine":13,"endColumn":10,"suggestions":"54"},{"ruleId":"47","replacedBy":"55"},{"ruleId":"49","replacedBy":"56"},{"ruleId":"51","severity":1,"message":"57","line":14,"column":8,"nodeType":"58","endLine":14,"endColumn":12},{"ruleId":"51","severity":1,"message":"59","line":14,"column":8,"nodeType":"58","endLine":14,"endColumn":12,"suggestions":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array.","ArrayExpression",["63"],["61"],["62"],"React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.","Identifier","React Hook useEffect has a missing dependency: 'url'. Either include it or remove the dependency array.",["64"],"no-global-assign","no-unsafe-negation",{"desc":"65","fix":"66"},{"desc":"67","fix":"68"},"Update the dependencies array to be: [data]",{"range":"69","text":"70"},"Update the dependencies array to be: [url]",{"range":"71","text":"72"},[280,282],"[data]",[415,419],"[url]"]
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,12 +1,32 @@
 import React from 'react';
 import './App.css';
-import Hello from './components/Hello';
+import ContextTest from './components/ContextText';

+//使用context传递以下数据
+interface IThemePropos {
+  [key: string]: { color: string; background: string; }
+}
+
+const themes: IThemePropos = {
+  'light': {
+    color: '#000',
+    background: '#eee'
+  },
+  'dark': {
+    color: '#fff',
+    background: '#222'
+  }
+}
+
+//创建一个context，并导出
+export const ThemesContext = React.createContext(themes.light);

 const App: React.FC = () => {
  return (
    <div className="App">
-      <Hello message="sasa" />
+      <ThemesContext.Provider value={themes.light}>
+        <ContextTest />
+      </ThemesContext.Provider>
    </div>
  );
 }
--- a/src/components/ContextText.tsx
+++ b/src/components/ContextText.tsx
@ -0,0 +1,16 @@
+import React, { useContext } from 'react';
+import { ThemesContext } from '../App';
+
+
+const ContextTest: React.FC = () => {
+
+    const theme = useContext(ThemesContext);
+    console.log(theme);
+    return (
+        <>
+            <h2>context text</h2>
+        </>
+    )
+}
+
+export default ContextTest;