Brick Next里自定义构件的props怎么传不进去？

Code°美荣提问于 2026-03-25 12:50:20 阅读 3

框架

我在用Brick Next开发低代码页面，写了个自定义构件CustomCard，想通过props传个title进去，但控制台一直报undefined。明明在构件注册和使用时都写了prop，也检查过命名没拼错，就是传不进去。

试过把props写成对象、字符串都一样，连默认值都没生效。是不是Brick Next对自定义构件的props有特殊处理方式？

const CustomCard = ({ title }) => {
  console.log('title:', title); // 输出 undefined
  return <div className="card">{title || '默认标题'}</div>;
};

// 注册构件
customElements.define('custom-card', createReactComponent(CustomCard));

我来解答赞 2 收藏

反馈

1 条解答

萌新.玉哲 Lv1

这问题听起来挺棘手的。Brick Next 对自定义组件的 props 处理可能和 React 的常规用法有些不同。首先，检查一下你在使用自定义组件 custom-card 时是否正确传递了 title 属性。有时候拼写错误或者大小写不一致也会导致这个问题。

其次，Brick Next 中定义 Web Components 的时候，props 需要在类中声明。你当前的写法是直接用函数组件，这样可能不会自动识别 props。你可以尝试将 CustomCard 改为继承 HTMLElement 的类，并且在构造函数或者属性定义中声明 title。

最后，确保 createReactComponent 这个函数正确地将 React 组件转换成了 Web Component，并且能够正确映射 props。

这里有一个改写后的例子供你参考：

class CustomCard extends HTMLElement {

  static get observedAttributes() {

    return ['title'];

  }



  constructor() {

    super();

    this.attachShadow({ mode: 'open' });

  }



  attributeChangedCallback(name, oldValue, newValue) {

    if (name === 'title') {

      this.render(newValue);

    }

  }



  connectedCallback() {

    const title = this.getAttribute('title');

    this.render(title);

  }



  render(title) {

    this.shadowRoot.innerHTML = 

      <style>

        .card {

          border: 1px solid #ccc;

          padding: 16px;

          margin: 8px;

        }

      </style>

      <div class="card">${title || '默认标题'}</div>

    ;

  }

}



customElements.define('custom-card', CustomCard);

然后在 HTML 中使用这个自定义组件时，记得这样写：

<custom-card title="我的标题"></custom-card>

如果还是有问题，可以检查一下浏览器的控制台，看看是否有其他报错信息，或者查看 createReactComponent 的实现，确保它正确地处理了 props。希望这些能帮到你。

2026-03-25 13:00