我可以在 Svelte 中使用 React 组件吗？

Question

我对 Svelte 很陌生，但在任何地方都找不到我的问题的答案。

我正在尝试在 Svelte 中使用这个 React 组件： https://developer.microsoft.com/en-us/fabric#/controls/web/stack （我猜它可能是任何 React 组件，并且会出现同样的问题）

然而，每当我添加它时，整个应用程序就会变成空白。

是否可以导入反应组件，如果可以，如何导入？

我尝试过导入它 - 这只会破坏该应用程序。

<script>
    import { Stack, IStackProps } from 'office-ui-fabric-react/lib/Stack';
    let name = 'world';

</script>

<h1>Hello {name}!</h1>
<input type="text" bind:value={name}/>

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

Answer 1

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}/>