如何通过反应中的组件传递变量的值?
How do I pass the value of a variable through the components in react?
那是我的 App.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link} from "react-router-dom";
import Particles from './components/particles'
import Title from './components/start'
import Explain from "./components/explain"
import "./App.css"
import Test from "./components/test"
import Test1 from "./components/IntLin/test1"
import Test2 from "./components/IntLin/test2"
import Test3 from "./components/IntLin/test3"
export default class App extends Component{
render(){
return (
<div>
<Router>
<div className="start">
<Particles/>
<Route exact path="/inicio" render={() => {
return <div className="titulo">
<Title}/>
</div>
}}>
</Route>
</div>
<Route exact path="/explain" render={() => {
return <div className="explain">
<Explain}/>
</div>
}}>
</Route>
<Route exact path="/test" render={() => {
return <div className="test">
<Test/>
</div>
}}>
</Route>
<Route exact path="/test1" render={() => {
return <div className="test1">
<Test1/>
</div>
}}>
</Route>
<Route exact path="/test2" render={() => {
return <div className="test2">
<Test2/>
</div>
}}>
</Route>
<Route exact path="/test3" render={() => {
return <div className="test3">
<Test3/>
</div>
}}>
</Route>
</Router>
</div>
);
};
}
所以,基本上我想在 app.js 中设置一个数字变量,然后当我转到 'Test' 组件时,我可以找到该变量并添加 +1,然后添加下一个组件 'Test1' 可以通过所有组件减去 -1 等等,直到到达最终组件,在那里您将获得最终变量的数量。
你可以同时使用 passing props 或 Context
但你真正想做的是传递两个或三个东西。
- 变量
- 增量功能
- 递减函数
或者您可以组合数字 2 和 3 :)
那是我的 App.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link} from "react-router-dom";
import Particles from './components/particles'
import Title from './components/start'
import Explain from "./components/explain"
import "./App.css"
import Test from "./components/test"
import Test1 from "./components/IntLin/test1"
import Test2 from "./components/IntLin/test2"
import Test3 from "./components/IntLin/test3"
export default class App extends Component{
render(){
return (
<div>
<Router>
<div className="start">
<Particles/>
<Route exact path="/inicio" render={() => {
return <div className="titulo">
<Title}/>
</div>
}}>
</Route>
</div>
<Route exact path="/explain" render={() => {
return <div className="explain">
<Explain}/>
</div>
}}>
</Route>
<Route exact path="/test" render={() => {
return <div className="test">
<Test/>
</div>
}}>
</Route>
<Route exact path="/test1" render={() => {
return <div className="test1">
<Test1/>
</div>
}}>
</Route>
<Route exact path="/test2" render={() => {
return <div className="test2">
<Test2/>
</div>
}}>
</Route>
<Route exact path="/test3" render={() => {
return <div className="test3">
<Test3/>
</div>
}}>
</Route>
</Router>
</div>
);
};
}
所以,基本上我想在 app.js 中设置一个数字变量,然后当我转到 'Test' 组件时,我可以找到该变量并添加 +1,然后添加下一个组件 'Test1' 可以通过所有组件减去 -1 等等,直到到达最终组件,在那里您将获得最终变量的数量。
你可以同时使用 passing props 或 Context
但你真正想做的是传递两个或三个东西。
- 变量
- 增量功能
- 递减函数
或者您可以组合数字 2 和 3 :)