将 props 从父组件传递到使用钩子的子组件

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>
  );
}

如何将道具从它的父级传递给这个"单选按钮组.js"？我尝试使用

<RadioButtonsGroup isAgent={false} />

但似乎没有这个.props.isAgent传递给孩子，根本没有this.props。

Answer 1

函数组件在this上没有它的 props，而是将props作为函数的第一个参数给出。

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

Answer 2

props传递的方式如下 -

function RadioButtonsGroup(props) {
}

或

const RadioButtonsGroup = props => {
}
export default RadioButtonsGroup;