reactjs - 如何在 reactjs 中将状态传递给 LinearStepper？

Question

这是我的变量所在的构造函数，我只想在 Horizo​​ntalLinearStepper 中传递这个变量...

export class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      area: null,
    };
  }

我成功获取了值并将其设置为 this.state.area

 var Area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        var area1 = L.GeometryUtil.formattedNumber(Area * 0.001) + "  m²";
        console.log(area1);
        this.setState({
          area: area1,
        });

这就是在第 1 步中我给组件仪表板的方式

case 1:
        return (
          <div style={{ padding: "2% 0" }}>
            <Typography variant="h4">Find your land on the map</Typography>
            <AlertNoPoly errorStatusPolly={errorStatusPolly} />
            <ul>
              <li>
                Find your land on the map and mark it using the map tools.
              </li>
              <li>Or upload a digital file of your land</li>
            </ul>
            <Dashboard viewMap={viewMap}  area={area} />
          </div>
        );

现在我的问题是，从 stepper 到 Dashboard 传递带有其值的变量没有问题，但是如何从 Dashboard 到 stepper 传递变量？

Answer 1

如果我正确理解了您的问题-这是一个将值从父母传递给孩子的示例

const Stepper = props => {
  const childValueHandler = (childValue) => {
    // do what you want with childValue
  }

  return <Dashboard childValueHandler={childValueHandler} />
}

所以在里面Dashboard你只需调用props.childValueHandler传递值作为参数