javascript - 如何通过 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

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

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

或者您可以将数字 2 和 3 结合起来:)

这是一个例子: https://codesandbox.io/s/74qzy90m3x