如何从 React 组件的渲染方法中获取纯文本或转换 JSX.元素到字符串

Question

我想获取渲染方法的纯文本而不将其渲染到 DOM 中：

class Test from React.Component {
    getPlainText = () => {
        const plainText = /* some method */(this.renderParagraph())
        console.log(plainText) // output in console: <p>I'm text from props of Text component!</p>
    }
    renderParagraph () {
       return <p>{this.props.text}</p>
    }
    render () {
        return <button onClick={this.getPlainText}>click me will print {this.props.text} in console</button>
    }
}

我没有找到可能的 React 或 ReactDom API 来满足这个要求。

Answer 1

我发现ReactDOMServer.renderToString提供了这个功能。

import ReactDOMServer from 'react-dom/server'
class Test from React.Component {
    getPlainText = () => {
        const plainText = ReactDOMServer.renderToString(this.renderParagraph())
        console.log(plainText) // output in console: <p>I'm text from props of Text component!</p>
    }
    renderParagraph () {
       return <p>{this.props.text}</p>
    }
    render () {
        return <button onClick={this.getPlainText}>click me will print {this.props.text} in console</button>
    }
}