javascript - React 将组件作为参数传递给函数

Question

我有一个将组件作为其参数的函数。该功能使用户能够呈现他们自己的弹出窗口，而不是我提供的弹出窗口。但是，在将其添加到数组之前，我无法向所述组件添加一些 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 类型错误。

Codesandbox

有什么方法可以成功将这些 props 添加到 Snack 组件中吗？

Answer 1

这正是 react High Order Component做:将 Prop 添加到作为参数传递的组件并返回一个组件。