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

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

框架

我在用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));

我来解答赞 7 收藏

反馈

2 条解答

夏侯思涵 Lv1

看起来问题出在props传递的方式上。推荐的做法是在注册组件时明确声明props类型和默认值，这样可以避免很多潜在问题。

首先确认下createReactComponent的实现方式，确保它正确处理了props传递。通常我们会在函数组件上使用defaultProps来设置默认值。

试着这样改写你的组件：

const CustomCard = ({ title }) => {

  console.log('title:', title);

  return <div className="card">{title || '默认标题'}</div>;

};



CustomCard.defaultProps = {

  title: '默认标题'

};



// 注册构件时检查props传递

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

另外在使用这个自定义构件时，记得通过属性名传入值，例如 <custom-card title="我的标题"></custom-card>。

如果还是不行，建议看看Brick Next关于自定义组件的文档，特别是关于属性映射的部分。有时候框架会对属性名做特殊处理，比如转成小写或加上前缀。这都是开发中踩过的坑啊。

2026-03-30 19:02

萌新.玉哲 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