reactjs 我可以直接在.html文件中使用ReactFlow吗？

rslzwgfq 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(94)

我在我的react应用程序的一个组件中使用ReactFlow，我也想在PDF报告中显示（当从UI生成时）。对于一个pdf，我在本地机器上创建一个.html文件，通过设置静态数据并发送到BE，然后他们用动态值替换静态数据。简而言之，从UI的Angular 来看，我必须在从.html文件生成的PDF报告中显示ReactFlow图/拓扑。那么有没有办法在html文件中使用ReactFlow呢？
提前感谢任何帮助。
我试着

<script src="
https://cdn.jsdelivr.net/npm/react-flow-renderer@10.3.17/dist/umd/index.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/react-flow-renderer@10.3.17/dist/style.min.css
" rel="stylesheet">

但不能取得成果。

reactjs

来源：https://stackoverflow.com/questions/76338151/can-i-use-reactflow-directly-in-html-file

1条答案

按热度按时间

bvuwiixz1#

如果你想在HTML文件中使用React组件（包括来自ReactFlow等库的组件），你必须在HTML中包含React和ReactDOM脚本，然后使用脚本将组件渲染到HTML中的容器中。

<body>
    <div id="root"></div>

    <!-- Include React and ReactDOM scripts -->
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

    <!-- Include the ReactFlow script (this URL may need to be updated) -->
    <script src="https://unpkg.com/react-flow-renderer/dist/ReactFlow.js"></script>

    <script>
        // Elements for the flow
        var elements = [
            { id: '1', type: 'input', data: { label: 'Input Node' }, position: { x: 250, y: 5 } },
            // More nodes...
        ];

        // Use the global ReactFlow variable from the script
        var FlowComponent = ReactFlow.default;

        // Render the ReactFlow component into the root div
        ReactDOM.render(
            React.createElement(FlowComponent, { elements: elements }),
            document.getElementById('root')
        );
    </script>
</body>

由于ReactFlow处理其内部状态、事件和上下文的方式，此设置可能仍然存在问题。通常建议将ReactFlow作为React项目的一部分使用，因为这是它设计的环境。在HTML中直接使用它可能会导致意外的行为或缺乏功能。

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 我可以直接在.html文件中使用ReactFlow吗？

1条答案

相关问题

热门标签

最新问答