Question

以下示例有效。只要不需要JSX，我就可以在没有编译/构建的简单网页中使用普通的React组件。

如果按如下所示链接Fluent UI（.JS和.CSS），是否可以以相同方式使用Fluent UI组件？这似乎不起作用。

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>

    <p>This is a test</p>
    <br />
    <br />

    <p><div class="test_container"></div></p>

    <!-- Load React -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Load Fabric (Commented out) -->
    <!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.css" />-->
    <!--<script src="https://cdn.jsdelivr.net/npm/office-ui-fabric-react@7.149.0/dist/office-ui-fabric-react.js"></script>-->
    
    <script  src="~/Content/LikeButton.js" crossorigin="anonymous"></script>

    <script>
        // Find all DOM containers, and render Like buttons into them.
        document.querySelectorAll(".test_container")
            .forEach(domContainer => {
                ReactDOM.render(React.createElement(LikeButton), domContainer);
            });
    </script>

</body>
</html>

LikeButton.js

'use strict';

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = { liked: false };
    }

    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }

        return React.createElement(
            'button',
            { onClick: () => this.setState({ liked: true }) },
            'Like'
        );
    }
}
``

在简单的网页中使用Fluent UI React组件（无JSX）

0 个答案: