将道具从 parent 传递到 child 使用挂钩的组件？

Question

我是一个初学者，在理解 React Hooks 时遇到了困难。

我有 child 个使用挂钩的组件 "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>
  );
}

如何将属性从 parent 传递给 "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;

将道具从 parent 传递到 child 使用挂钩的组件？

Pass props from parent to child component that uses hooks?

reactjs

react-hooks