Question

我有一个愚蠢的React组件，它接收一堆参数，其中有几个是funcs。

        days         starts    ends
        ------------ --------- ------------
        Monday       NULL      NULL
        Tuesday      09:00     15:00
        Wednesday    09:00     18:00
        Thursday     NULL      NULL
        Friday       10:00     12:00
        Saturday     NULL      NULL
        Sunday       NULL      NULL

        (7 row(s) affected)

显然我没有粘贴的PropTypes模块告诉我const ProfileForm = (user, markers, onChange, onCheckBoxChange) => { return ( <div> <TextInput name={'firstname'} label={'First name: '} value={user.firstname} onChange={onChange}/> <TextInput name={'lastname'} label={'Last name: '} value={user.lastname} onChange={onChange}/> <TextInput name={'phone'} label={'Phone: '} value={user.phone} onChange={onChange}/> <div> As who you want to be presented on a map: <CheckBoxInput name={"type"} label={"Driver"} value={Constants.TYPE_DRIVER} checked={markers.driver} onChange={onCheckBoxChange}/> <CheckBoxInput name={"type"} label={"Passenger"} value={Constants.TYPE_PASSENGER} checked={markers.passenger} onChange={onCheckBoxChange}/> </div> </div> ); };参数应该是一个func但是一个对象。我检查了调试器，确实是一些我没有通过的奇怪的对象。

好吧，我把我的组件改成了智能组件，没有改变其他任何东西，现在就可以了！我错过了什么吗？

onChange

Answer 1

哑“功能”组件采用props的单个参数。他们没有接受一系列争论。我的意思是，考虑一下......这将是怎样的：

<ProfileForm user={user} onChange={onChange}/>

能够被解析为：

ProfileForm(user, undefined, onChange, undefined)

它不能！

相反，它会这样调用：

ProfileForm({user:user, onChange:onChange})

您可以在函数定义中以相同的方式引用;

const ProfileForm = ({user, markers, onChange, onCheckBoxChange}) => {

Answer 2

我认为你缺少功能组件中道具的对象解构

const ProfileForm = ({user, markers, onChange, onCheckBoxChange}) => {
 // its important because functional component takes a single argument. but with ES6 you can always destructure it

 return (
    <div>
      <TextInput name={'firstname'} label={'First name: '} value={user.firstname} onChange={onChange}/>
      <TextInput name={'lastname'} label={'Last name: '} value={user.lastname} onChange={onChange}/>
      <TextInput name={'phone'} label={'Phone: '} value={user.phone} onChange={onChange}/>
      <div>
        As who you want to be presented on a map:
        <CheckBoxInput name={"type"} label={"Driver"} value={Constants.TYPE_DRIVER} checked={markers.driver} onChange={onCheckBoxChange}/>
        <CheckBoxInput name={"type"} label={"Passenger"} value={Constants.TYPE_PASSENGER} checked={markers.passenger} onChange={onCheckBoxChange}/>
      </div>
    </div>
  );
};

或者您可以尝试使用单个参数

const ProfileForm = (props) => {
  return (
    <div>
      <TextInput name={'firstname'} label={'First name: '} value={props.user.firstname} onChange={props.onChange}/>
      <TextInput name={'lastname'} label={'Last name: '} value={props.user.lastname} onChange={props.onChange}/>
      <TextInput name={'phone'} label={'Phone: '} value={props.user.phone} onChange={props.onChange}/>
      <div>
        As who you want to be presented on a map:
        <CheckBoxInput name={"type"} label={"Driver"} value={Constants.TYPE_DRIVER} checked={props.markers.driver} onChange={props.onCheckBoxChange}/>
        <CheckBoxInput name={"type"} label={"Passenger"} value={Constants.TYPE_PASSENGER} checked={props.markers.passenger} onChange={props.onCheckBoxChange}/>
      </div>
    </div>
  );
};

你的Class组件正在运行，因为你在那里传递了正确的道具。

不同的道具表示聪明和愚蠢的组件

2 个答案: