在下面的代码片段中，如何在从另一个类导入的自定义JSX标记中换行：

import React from 'react';
import CustomComponent from './CustomComponent';

function App() {
  return (
    <div>
      <CustomComponent>
        {
          `这是第一行
           这是第二行`
        }
      </CustomComponent>
    </div>
  );
}

export default App;

import React from 'react';
import CustomComponent from './CustomComponent';

function App() {
  const lines = [
    '这是第一行',
    '这是第二行',
    '这是第三行'
  ];

  return (
    <div>
      <CustomComponent>
        {lines.map((line, index) => (
          <React.Fragment key={index}>
            {line}
            <br />
          </React.Fragment>
        ))}
      </CustomComponent>
    </div>
  );
}

export default App;

import React from 'react';
import CustomComponent from './CustomComponent';

function App() {
  return (
    <div>
      <CustomComponent>
        这是第一行<br />
        这是第二行<br />
        这是第三行
      </CustomComponent>
    </div>
  );
}

export default App;

import React from 'react';
import CustomComponent from './CustomComponent';
import './App.css';

function App() {
  return (
    <div>
      <CustomComponent className="multiline-text">
        这是第一行 这是第二行 这是第三行
      </CustomComponent>
    </div>
  );
}

export default App;

.multiline-text {
  white-space: pre-wrap; /* 或者 pre-line，取决于你想要的换行行为 */
}