我有一个将组件作为其参数的函数。该功能使用户能够呈现他们自己的弹出窗口,而不是我提供的弹出窗口。但是,在将其添加到数组之前,我无法向所述组件添加一些 Prop 。
const addCustomSnack = (Snack, position) => {
let id = generate();
let snackProps = {
key: id,
id,
};
Snack.props = {...Snack.props, ...snackProps}
console.log(Snack);
buildStyle(position);
if (messagesNew.length >= 3) {
que.push(Snack);
addSnacks(messagesNew);
} else {
messagesNew = [...messagesNew, Snack];
addSnacks(messagesNew);
}
console.log(messagesNew);
};
是这样的
Cannot assign to read only property 'props' of object '#<Object>'
我试过下面的代码
const addCustomSnack = (Snack, position) => {
let id = generate();
console.log(Snack);
buildStyle(position);
if (messagesNew.length >= 3) {
que.push(Snack);
addSnacks(messagesNew);
} else {
messagesNew = [...messagesNew, <Snack key={id} id={id} />];
addSnacks(messagesNew);
}
console.log(messagesNew);
};
但是,它会导致 React.createElement 类型错误。
有什么方法可以成功将这些 props 添加到 Snack 组件中吗?
最佳答案
这正是 react High Order Component做:将 Prop 添加到作为参数传递的组件并返回一个组件。
关于javascript - React 将组件作为参数传递给函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57395660/