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

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