Juste pour prolonger un peu la réponse de WiredPrairie, un mini composant qui peut être ouvert et fermé.
Peut être utilisé comme:
<Pretty data={this.state.data}/>
export default React.createClass({
style: {
backgroundColor: '#1f4662',
color: '#fff',
fontSize: '12px',
},
headerStyle: {
backgroundColor: '#193549',
padding: '5px 10px',
fontFamily: 'monospace',
color: '#ffc600',
},
preStyle: {
display: 'block',
padding: '10px 30px',
margin: '0',
overflow: 'scroll',
},
getInitialState() {
return {
show: true,
};
},
toggle() {
this.setState({
show: !this.state.show,
});
},
render() {
return (
<div style={this.style}>
<div style={this.headerStyle} onClick={ this.toggle }>
<strong>Pretty Debug</strong>
</div>
{( this.state.show ?
<pre style={this.preStyle}>
{JSON.stringify(this.props.data, null, 2) }
</pre> : false )}
</div>
);
}
});
Mise à jour
Une approche plus moderne (maintenant que createClass est en voie de disparition)
import styles from './DebugPrint.css'
import autoBind from 'react-autobind'
import classNames from 'classnames'
import React from 'react'
export default class DebugPrint extends React.PureComponent {
constructor(props) {
super(props)
autoBind(this)
this.state = {
show: false,
}
}
toggle() {
this.setState({
show: !this.state.show,
});
}
render() {
return (
<div style={styles.root}>
<div style={styles.header} onClick={this.toggle}>
<strong>Debug</strong>
</div>
{this.state.show
? (
<pre style={styles.pre}>
{JSON.stringify(this.props.data, null, 2) }
</pre>
)
: null
}
</div>
)
}
}
Et votre fichier de style
.root {backgroundColor: '# 1f4662'; couleur: '#fff'; fontSize: '12px'; }
.header {backgroundColor: '# 193549'; rembourrage: '5px 10px'; fontFamily: 'monospace'; couleur: '# ffc600'; }
.pre {affichage: 'block'; rembourrage: '10px 30px'; marge: «0»; débordement: 'scroll'; }
JSON.stringify(json, null, "\t")
?