使用 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 block/inline 属性调整元素，如下所示：https://www.w3schools.com/Css/css_inline-block.asp

Answer 2

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

添加了一些 CSS class:

.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)
            );

使用 api 在 React DOM 中并排控制

Side by side controls in React DOM using api

typescript

reactjs

powerapps-component-framework