如何将React子组件以带缩进、换行及JSX语法糖的字符串形式展示？

Got it, I totally get what you're trying to do—you want to show the original, nicely formatted JSX code of your child component (with proper indentation, line breaks, and that familiar JSX syntax) instead of the compiled JavaScript that ExampleChild.toString() spits out. The problem with toString() is that it returns the Babel-transpiled version of your component (where JSX gets converted to React.createElement calls), not the code you actually wrote.

Here are a couple of reliable ways to make this work:

Method 1: Import the Raw Component Source (Webpack/Create React App) #

You can directly import your child component's source code as a string using raw-loader, then display it with syntax highlighting (or plain formatted text).

Step 1: Prep Dependencies #

• For custom Webpack setups: Install raw-loader first

  npm install raw-loader --save-dev
  

• For Create React App: No extra installation needed—it includes raw-loader by default.

Step 2: Import the Raw Source #

Use inline loader syntax to import your component's source file. For Create React App, add double exclamation marks to override default loaders:

import ExampleChildCode from '!!raw-loader!./ExampleChild.js';

For custom Webpack, you can either use the inline syntax above or add a dedicated rule to your webpack.config.js for raw file imports.

Step 3: Display the Code with Highlighting #

To make the code readable and styled, use react-syntax-highlighter. First install it:

npm install react-syntax-highlighter --save

Then update your parent component:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import ExampleChildCode from '!!raw-loader!./ExampleChild.js';

class ExampleChild extends Component {
  render() {
    return (
      <p>Hello!!</p>
    );
  }
}

class ExampleParent extends Component {
  render() {
    return (
      <div>
        <ExampleChild />
        <h3>Here's the ExampleChild code:</h3>
        <SyntaxHighlighter language="jsx" style={tomorrow}>
          {ExampleChildCode}
        </SyntaxHighlighter>
      </div>
    );
  }
}

ReactDOM.render(<ExampleParent />, document.getElementById('root'));

Method 2: Plain Text Display (No Third-Party Highlighter) #

If you don't need syntax coloring and just want to preserve indentation/line breaks, wrap the imported raw code in <pre> and <code> tags:

class ExampleParent extends Component {
  render() {
    return (
      <div>
        <ExampleChild />
        <h3>Here's the ExampleChild code:</h3>
        <pre>
          <code>{ExampleChildCode}</code>
        </pre>
      </div>
    );
  }
}

The <pre> tag preserves all whitespace (indentation, line breaks) exactly as it appears in your source file.

Quick Note on toString() #

Just to clarify why this approach doesn't work: When you compile React code, Babel converts JSX into React.createElement calls. So ExampleChild.toString() returns the compiled render function code, not the original JSX you wrote—hence the lack of formatting and familiar syntax.

内容的提问来源于stack exchange，提问作者Ryan Paixao