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

Posted 2023-02-23

【中文标题】如何强制地将 prop 分配给 React 组件？

【英文标题】：How to imperatively assign a prop to a React component?

【发布时间】：2019-11-25 18:11:41

【问题描述】：

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

当我尝试这个时：

component.props.onChange = onChange;

我收到以下错误。

TypeError：无法分配给对象“#”的只读属性“onChange”

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

表单模板.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 />,
  , 

【参考方案1】：

就像错误所说的那样，你不能改变你直接得到的道具。 更新组件 props 的唯一方法是克隆元素并将 props 添加/更新到克隆的元素。

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

【参考方案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 一起使用应该不难。