如何從React組件的render方法獲取純文本或將JSX.Element轉換為字符串？

Question

我想獲取一個render方法的純文本而不將其渲染到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>
    }
}

Answer 2

您忘記在getPlainText（）方法中添加“ =>”

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