React 组件通信

Question

过去两周我一直在用 React 和 Material UI 编写原型，我真的很喜欢它！

到目前为止，我一直将所有组件放在我的主类中以摆脱困境，并没有考虑太多组件通信。

我的问题是我不知道如何告诉我导入的组件，启用/禁用它的按钮。

在我的例子中，我在我的主类中导入了一个 Stepper，如果尚未设置主类中的一系列状态值，我想禁用“NEXT”按钮。

所以，首先，我必须选择我的加油机，然后下一个按钮再次启用和禁用，直到我选择我的燃料类型，然后再次禁用“下一步”按钮，直到选择了数量，然后完成加油。

Stepper 就是您可以在 Material ui 网站上找到的 demo。

我在主类中的状态是这样的：

    fuelDispenser: 0,
    fuelDispenserChosen: false,

    fuelType: '',
    fuelTypeChosen: false,

    fuelAmount: 0,
    fuelAmountChosen: false,

我正在调用我桌子旁边的步进器，列出所有分配器。

<div className="row center-xs">
    <div className="col-xs-6">
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Dispenser Name</TableCell>
              <TableCell>Status</TableCell>
              <TableCell>Fueling</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.state.dispensers.map(dispenser => {
              return(
                <TableRow key={dispenser.uid}>
                  <TableCell>{dispenser.description}</TableCell>
                  <TableCell>{dispenser.status}</TableCell>
                  <TableCell>{
                    <Button 
                      variant="raised" 
                      color="primary" 
                      type="submit"
                    > START
                    </Button> 
                  }
                  </TableCell>
                </TableRow>
              );
            })}
            </TableBody>
        </Table>
      </Paper>
    </div>

    <div className="col-md-6">
      <FuelingStepper />
    </div>

如果有人可以向我解释如何将我的 props 传递给组件，即使是在不同的示例中，我也会非常高兴。我知道我可以做类似的事情，

<FuelingStepper fuelDispenserChosen={fuelDispenserChosen} 
                fuelTypeChosen={fuelTypeChosen} 
                fuelAmountChosen={fuelAmountChosen}
/>

但我不明白如何在 Stepper 类中处理所有这三个。

Answer 1

您可以将 state 变量作为 props 传递，如下所示。

 <FuelingStepper fuelDispenserChosen={this.state.fuelDispenserChosen} 
            fuelTypeChosen={this.state.fuelTypeChosen} 
            fuelAmountChosen={this.state.fuelAmountChosen} />

在FuelingStepper 组件中，您可以使用this.props 获取这些值，如下所示。

 this.props.fuelDispenserChosen
 this.props.fuelTypeChosen
 this.props.fuelAmountChosen

我为您创建了一个小示例，用于展示如何传递状态变量并将其获取到另一个组件中。

  class Hello extends React.Component {
     constructor(props) {
        super(props);        
        this.state = {
          fuelDispenserChosen: 'false',
          fuelTypeChosen: 'true',
          fuelAmountChosen: 'false'
         };
      }
      render() {
        return (
           <div>
               <h1>Hello {this.props.name}</h1> 
               <FuelingStepper fuelDispenserChosen={this.state.fuelDispenserChosen} 
                               fuelTypeChosen={this.state.fuelTypeChosen} 
                               fuelAmountChosen={this.state.fuelAmountChosen} />
           </div>                
         )          
       }
  }
  class FuelingStepper extends React.Component {
  render() {
      return (
         <table>
            <tr>
              <td>Fuel Dispenser Chosen</td>
              <td>{this.props.fuelDispenserChosen}</td>
            </tr>
            <tr>
              <td>Fuel Type Chosen</td>
              <td>{this.props.fuelTypeChosen}</td>
            </tr>
            <tr>
             <td>Fuel Amount Chosen</td>
             <td>{this.props.fuelAmountChosen}</td>
            </tr>
         </table>  
        )          
     }
  }


  ReactDOM.render(
      <Hello name="James" />,
             document.getElementById('container')
  );

FIDDLE DEMO