在提升的 renderInput 函数 (React) 中未定义道具

Question

我有一个链接到父主页的功能性 SearchBar 子组件。 我从父组件传递 id 和 label 的道具。 子组件读取道具 ID 和标签为“未定义”。 我有另一个下拉组件的完全相同的代码，它可以工作。 我的猜测是，这可能是因为我将道具传递给了一个提升的（在功能组件主体上方）renderInput 函数？ 你能将 props 传递给提升的辅助函数吗？ 我也在使用 Redux Form，我不确定它是否使事情复杂化。 Input 是 Redux Form 的一个道具，工作正常。 这是我的代码：

//helper render function hoisted to prevent re-render of searchbar with every key stroke
const renderInput = ({ id, label input }) => {
  return (
    <div className="container position-relative" id={id}>
      {label}

      <input
        {...input}
        type="text"
        placeholder="Search..."
        className="py-4 px-5 border rounded-sm form-control"
      />
    </div>
  );
};

const SearchBar = ({ handleSubmit, submitSearch }) => {
    
    const onSubmit = (formValues, dispatch) => {
        submitSearch(formValues); //calls search action creator
        dispatch(reset("SearchBar")); //clears search form after submission 
    }
    
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <Field
          name="search"
          component={renderInput}
        />
      </form>
    ); 
}

Answer 1

这是工作代码，如果其他人遇到同样的问题。 您必须将 id 和 label 的自定义道具传递给 Redux Form 中的 Field 组件，以便 Redux Form 组件读取它。

<Field name="search" component={renderInput} id={id} label={label} />