Artur Mustafin在他的文章React.Component wrapper for Svelte中回答了这个问题。

<script>
  import { onMount } from "svelte";
  import React from "react";
  import ReactDOM from "react-dom";
  const e = React.createElement;
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { liked: false };
    }
    render() {
      if (this.state.liked) {
        return "You liked this.";
      }
      return e("button", { onClick: () => this.setState({ liked: true }) }, "Like");
    }
  }
  let container;
  onMount(function() {
    ReactDOM.render(e(LikeButton), container);
  });
</script>

<div bind:this={container}/>

检查此存储库：https://github.com/jpinho/svelte-react-material
我开发了一个名为ReactAdapter的实用程序类，它可以将任何React组件注入到Svelte.The code is based on RichHarris/react-svelte .中
此外，该项目作为一个模板，以演示您如何可以有苗条和React生活在一起。
ReactAdapter的使用示例如下：

<script>
  import Button from "@material-ui/core/Button";
  import ReactAdapter from "./utils/ReactAdapter.svelte";
</script>

<ReactAdapter
  el={Button}
  class="mui-btn"
  children="Hello"
  variant="contained"
  color="primary"
  onClick={() => alert("hello world!")}
/>

<style>
  /**
   * Styling a React Component from within a Svelte Component.
   */
  :global(.mui-btn) {
    margin: 20px;
  }
</style>

通过svelte-preprocess-react，您可以使用react组件，方法是将标签前缀为react:，这样<Stack>就会变为<react:Stack>：

<script>
  import { Stack } from 'office-ui-fabric-react';
</script>

<react:Stack horizontal tokens={{ childrenGap: 50 }}  > 
  <div>test</div>
</react:Stack>