返回中未定义的道具，但另有定义

Question

我试图将一些道具从父母传递给孩子，但是我很困惑。当我尝试在返回之前打印道具时，我会得到值，但是如果我尝试在jsx中使用它们，则会得到未定义的值。

const FormField = (empty, stateName, value, smallLetters, changeValue) => {
   console.log(empty, stateName, value, smallLetters, changeValue);
  return(
    <div>
      {console.log(empty, stateName, value, smallLetters, changeValue)}
  <label htmlFor="formGroupExampleInput">{value}</label>
   <input type="text" className='form-control' required onChange={(e) => { changeValue(e, stateName); }}/>
  </div>
);
}

打印语句的结果：

Answer 1

react函数组件期望props是一个对象，而不是各个参数。

尝试

const FormField = ({empty, stateName, value, smallLetters, changeValue}) ...。

Answer 2

您的功能组件可以接受props属性作为（）-括号中的参数，然后可以像这样将其分解

不进行破坏-const FormField = (props)，然后通过使用props.empty，props stateName等访问渲染器中的props

具有解构const FormField = ({empty, stateName, value, smallLetters, changeValue})

Answer 3

我找到了答案

const FormField = (state) => {
  const propsNow = state;
  return (
    <div>
      {console.log(propsNow.empty)}
      <label htmlFor="formGroupExampleInput">{propsNow.value}</label>
      <input type="text" className='form-control' required onChange={(e) => { propsNow.changeValue(e, propsNow.stateName); }}/>
    </div>
  );
};