Question

我是一个初学者，他努力了解反应钩子。

我有使用钩子的子组件“ RadioButtonsGroup”（由MUI构建）：

function RadioButtonsGroup() {
  const [value, setValue] = React.useState('isAgent');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <FormControl component="fieldset">
      <RadioGroup aria-label="Gender" name="gender1" value={value} onChange={handleChange}>
        <FormControlLabel
          value="isAgent"
          control={<Radio color="primary" />}
          label="Agent"
          labelPlacement="start"
        />
        <FormControlLabel
          value="isLandlord"
          control={<Radio color="primary" />}
          label="Landlord"
          labelPlacement="start"
        />
      </RadioGroup>
      <FormHelperText>labelPlacement start</FormHelperText>
    </FormControl>
  );
}

如何从其父级将道具传递给此“ RadioButtonsGroup.js”？我尝试使用

<RadioButtonsGroup isAgent={false} />

但是似乎没有this.props.isAgent传递给child，也根本没有this.props。

Answer 1

函数组件在this上没有它的支持，但是props被作为函数的第一个参数给出。

function RadioButtonsGroup(props) {
  const { isAgent } = props;

  // ...
}

Answer 2

props的传递方式类似于-

function RadioButtonsGroup(props) {
}

或

const RadioButtonsGroup = props => {
}

export default RadioButtonsGroup;

将道具从父级传递到使用挂钩的子级组件？

2 个答案: