如何通过反应中的组件传递变量的值?

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 但你真正想做的是传递两个或三个东西。

  1. 变量
  2. 增量功能
  3. 递减函数

或者您可以组合数字 2 和 3 :)

示例如下: https://codesandbox.io/s/74qzy90m3x