如何在React组件中显示漂亮的JSON？

Question

我有这个ES6 React组件：

class KeyDetails extends React.Component {

    render() {
        return (
            <p className="layout__item u-1/2-lap-and-up">
                {JSON.stringify(this.props.details, null, 2)}
            </p>
        )
    }
}

但所有换行符和引号都显示为编码。

如何通过React显示原始的，格式正确的文本？

Answer 1

通常，当您想要在格式化文本上保留空格时，要使用的相应标记为<pre />，所以：

class KeyDetails extends React.Component {

    render() {
        return (
            <pre className="layout__item u-1/2-lap-and-up">
                {JSON.stringify(this.props.details, null, 2)}
            </pre>
        )
    }
}

关于编码：鉴于信息很难说。例如，这个小提琴奏效了。

https://jsfiddle.net/2mtrj0a3/1/