Question

我真的是Svelte的新手，但是在任何地方都找不到我的问题的答案。

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

但是，每当我添加它时，整个应用程序都变成空白。

是否可以导入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

也许可行。.

您可以尝试苗条 let myRawReactHtml = '<div id="my-react-app"></div>'

{@html myRawReactHtml}

然后在该位置使用react 但是我不会这样做。最好选择一个框架

Answer 2

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

Answer 3

检查此存储库：https://github.com/jpinho/svelte-react-material

我开发了一个名为 ReactAdapter 的实用程序类，您可以使用它向 Svelte 中注入任何 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中使用React组件吗？

3 个答案: