reactjs - 使用 api 在 React DOM 中并排控制

Question

我正在与此作斗争，想在网格上方显示一排控件。

        const lblPG = React.createElement('h3', {}, 'Product Group');
        const cboPG = React.createElement(ComboBox, props);
        const elementPG = React.createElement(React.Fragment, null, lblPG, cboPG);

        const lblTT = React.createElement('h3', {}, 'Task Type');
        const cboTT = React.createElement(ComboBox, props);
        const elementTT = React.createElement(React.Fragment, null, lblTT, cboTT);

        const toprow = React.createElement('span', {},
            elementPG, elementTT);

        const list =
            React.createElement('div', {},
                toprow,
                React.createElement(DetailsListGrid, appProps)
            );

        ReactDOM.render(
            list,
            this._container
        );

上面的代码导致了 PCF 线束：

我想有这样的：

Answer 1

请使用 JSX 而不是以上述方式创建元素。此外，使用 CSS 块/内联属性来调整元素，如下所示：https ://www.w3schools.com/Css/css_inline-block.asp

Answer 2

好的，这就是我使用一些 CSS 技巧解决它的方法。

添加了一些 CSS 类：

.flexdiv{
    display:inline-flex;
    text-align:left;
    margin-left: 5 px;
    clear:both;
}

.cleardiv{
    text-align:left;
    clear:both;
}

并像这样操作 DOM：

        const toprow = React.createElement('div', { className: "flexdiv" },
            elementPG, spacer, elementTT);

        const list =
            React.createElement('div', { className: "cleardiv" },
                toprow,
                React.createElement(DetailsListGrid, appProps)
            );