如何通过react中的组件传递变量的值？

Question

这是我的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，因此遍历所有组件，直到到达最终组件，您将在其中获得最终变量的数量。

Answer 1

您可以同时使用传递的道具或Context，但您真正想要做的是传递两三个东西。

1. 变量
2. 增量剂功能
3. 减量功能

或者您可以将数字2和3组合在一起：）

这里是示例：https://codesandbox.io/s/74qzy90m3x