Question

我发现与问题here类似。

但是我有一些不同的情况。我有html字符串，而不仅仅是字符串。所以，我想做：

让我们假设MyComponent现在只是返回h3元素：

transform.scaledBy

这将在浏览器中呈现如下：

@objc func handlePinch(_ gestureRecognizer: UIPinchGestureRecognizer) {
        let currentScale = self.imageView.frame.width/self.imageView.bounds.size.width
        var newScale = gestureRecognizer.scale
        if currentScale * gestureRecognizer.scale < minScale {
            newScale = minScale / currentScale
        } else if currentScale * gestureRecognizer.scale > maxScale {
            newScale = maxScale / currentScale
        }
        self.imageView.transform = self.imageView.transform.scaledBy(x: newScale, y: newScale)

        print("current scale: \(currentScale), new scale: \(newScale)")

        gestureRecognizer.scale = 1
}

我在这里可以解决的问题是首先将组件转换为html字符串。

const MyComponent = ({children}) => (<h3>{children}</h3>)

var parts = "<h1>I</h1><p>am a cow;</p>cows say moo. MOOOOO."
    .split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <MyComponent key={i}>{parts[i]}</MyComponent>;
}
// But I need html to be rendered
return <div dangerouslySetInnerHTML={{ __html: parts }} />

但是我不知道如何将组件转换为html字符串。

Answer 1

您可以使用react-dom

import { renderToString } from 'react-dom/server'
//
//
parts[i] = renderToString(<MyComponent key={i}>{parts[i]}</MyComponent>)

在此处查看更多https://reactjs.org/docs/react-dom-server.html

如何将react组件转换为html字符串？

1 个答案: