如何将道具紧急分配给React组件？
提问于 2019-07-16 16:00:23
我如何不偏不倚地将道具添加到组件中(而不使用组件标记)？
当我尝试这个：
component.props.onChange = onChange;我得到以下错误。
TypeError:无法指定对象'#‘的只读属性'onChange’
下面是我的一些上下文代码。
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 />,
},
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-16 16:24:19
就像错误说的，你不能直接改变你得到的道具。更新组件道具的唯一方法是克隆元素并向克隆的元素添加/更新道具。
const getComponent = ( onChange, component, ) =>
React.cloneElement(component, { onChange })Stack Overflow用户
发布于 2019-07-16 16:55:51
还有一种方法可以让您的代码保持在组件的上下文中(而不是创建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一起工作也不太困难。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57066881
复制相关文章
点击加载更多
腾讯云开发者
