时间戳

首页 > 解决方案 > React，将 const 更改为带有 props 的组件

reactjs - React，将 const 更改为带有 props 的组件

问题描述

反应，

您好，我需要为带有道具的组件更改 const。

我该怎么做？

const renderFieldOne = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <div className ="group">
      <input className="text"
      {...input}
      type={type}/>
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

标签： reactjscomponentsconstants

解决方案

您需要为需要调用的每个函数单独传递每个道具

<renderFieldOne
  input={renderFieldOneInputValue} 
  label={renderFieldOneLabelValue}
  type={renderFieldOneTypeValue}
  meta={touched}
/>

然后在 renderFieldOne 组件中你可以做

const renderFieldOne = ({input, label, type }) => {...}

通过解构，它会将匹配的属性名称/值分配给传入的变量，将其用作参考https://amido.com/blog/using-es6-destructuring-in-your-react-components/。名称只需要与属性匹配

或者只是做

const renderFieldOne = (props) => {...}
and in each place call props.input or whatever prop you are trying to access.

推荐阅读