如何强制性地将 prop 分配给 React 组件？

Question

如何向组件强制添加 prop（不使用组件标签？）

当我尝试这个时：

component.props.onChange = onChange;

我收到以下错误。

TypeError: Cannot assign to read only property 'onChange' of object '#'

这是我的更多上下文代码。

FormTemplate.js

const getComponent = ( onChange, component, ) => {
  component.props.onChange = onChange; // this line throws the error
  return component;
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map( ({ component, ...rest, }) =>
          ( component && (rest.type === 'component') )
          ?
          getComponent(onChange, component,)
          :
          getTextField(onChange, rest,)
        )
      }
    </div>
  );
}

AppConfig.js

const formFieldConfig = {
  zip: {
    type: 'component',
    label: 'Zip code',
    icon: 'place',
    component: <ZipCodeInput />,
  }, 
}

Answer 1

正如错误所说，你不能改变你直接得到的道具。更新组件道具的唯一方法是克隆元素和 add/update 道具到克隆的元素。

const getComponent = ( onChange, component, ) =>
  React.cloneElement(component, { onChange })

Answer 2

还有另一种方法可以让您的代码保持在组件的上下文中（而不是创建 getComponent 辅助函数，这会增加一些间接性），并且可能对其他开发人员来说更清楚以后使用此代码：

const formFieldConfig = {
  zip: {
    type: 'component',
    label: 'Zip code',
    icon: 'place',
    component: ZipCodeInput, // <-- Don't create an element yet
  }, 
}

const FormTemplate = ({ fields, onChange, }) => {
  // ...
  return (
    <div>
      {
        fields.map(({ component, ...rest, }) => {
          const Component = (component && (rest.type === 'component'))
            ? component
            : textField // <-- Assuming this is also a React component

          return <Component onChange={onChange} {...rest} />
        })
      }
    </div>
  );
}

如果不看代码，很难确定它是否可以与 TextField 一起使用，但是让它与 getTextField 一起工作应该不难。

如何强制性地将 prop 分配给 React 组件？

How to imperatively assign a prop to a React component?

components

reactjs

react-props

react-component