使用 React 和 Web 组件

Question

在我们的项目中，我们使用 React 和 Web 组件来开发可重用的 UI 组件（这些组件又将被内部的各种开发团队使用）。组件在 React 中开发并通过 Web 组件注册为自定义 HTML 元素。我们需要一种方法来定义 HTML 自定义标签中的 props 并访问我们的 React 组件中的所有 props。

HTML 会是这样的

<custom-element props1='pageInfo' props2='mediaInfo'></custom-element>

pageInfo 和 mediaInfo 将是 JS 对象，它们将在全局窗口范围内声明，或者它们可以在其他命名空间/对象内，在这种情况下，HTML 将类似于

<custom-element props1='NS.pageInfo' props2='NS.mediaInfo'></custom-element>

或

<custom-element props1='NS.Page.pageInfo' props2='NS.Media.mediaInfo'></custom-element>

因此，我们需要一种方法来获取 HTML 中定义的所有道具并将它们解析为对象并将其传递给ReactDOM.render

目前渲染和注册自定义元素的代码是，

class RegComponent extends HTMLElement {
    constructor() {
        super();
    }
    createdCallback() {
        ReactDOM.render(<App props1={eval(this.getAttributes('props1'))}/>, this);
    }
}
document.registerElement('custom-element', RegComponent);

我们想摆脱 eval 并且所有声明的 props 都应该从 HTML 中获取并传递给ReactDOM.render。寻找类似的东西，

ReactDOM.render(<App {getAllProps()}/>, this);

getAllProps() 应返回所有道具名称及其值。请记住，我使用的是 ES6。任何帮助将不胜感激！

Answer 1

不使用 JSX 怎么样：

ReactDOM.render(<App props1={eval(this.getAttributes('props1'))}/>, this);

直接使用 React，通过适配器将属性转换为 props：

ReactDOM.render(React.createElement(App, {...getAllProps(this.attributes)}), this);

function getAllProps(attributes) {
    var props = {};
    for (var i = 0; i < attributes.length; i++) {
        props[attributes[i].nodeName] = attributes[i].nodeValue;
    }
    return props;
}

Answer 2

如果getAllProps() 返回一个对象，并且对象中的每个属性都是您想要的道具，您只需更新您的渲染以使用扩展运算符（...）。这将解构您的对象，以便将每个属性作为prop 传递给App。

这是它的样子：

ReactDOM.render(<App {...getAllProps()}/>, this);