Javascript 如何在以下代码段中打断从另一个类导入的自定义JSX标记中的行：

在这里，我想在第2点后换行，我尝试了“\n”和br，这个标记是在JSX中通过以下代码生成的：

             <Experience
           startYear={2019}
           endYear={2019}
           jobName="First Job"
           jobDescription="1. Providing API calls support for Headless CMS.2. Provide escalated ticket/incident management support"
           />

import React，{Component}来自'React'；
从'react mdl'导入{Grid，Cell}；
类经验扩展组件{
render（）{
返回(
{this.props.startYear}-{this.props.endYear}

{this.props.jobName}
{this.props.jobDescription}

)
}
}
出口违约经验；

使用数组，然后循环数组以输出每个项目的。使用字符串不起作用，因为它在进入道具时会被转义。虽然我知道它可能不适合工作描述领域

---

或者，使用您可以在字符串中编写html标记，然后使用呈现，风险自负。

我会将jsx组件作为道具传递给子级，而不仅仅是原始文本。这使您能够更灵活地控制UI在父组件中的呈现/排序方式

       import React, { Component } from 'react';
       import { Grid, Cell } from 'react-mdl';

       class Experience extends Component {
          render() {
             return(
                <Grid>
                <Cell col={4}>
                   <p>{this.props.startYear} - {this.props.endYear}</p>
                </Cell>
                <Cell col={8}>
                  <h4 style={{marginTop:'0px'}}>{this.props.jobName}</h4>
                <p>{this.props.jobDescription}</p>
                </Cell>
               </Grid>
             )
         }
     }

     export default Experience;

const Parent=（）=>(
)
const Child=（道具）=>(
儿童特有的东西
{props.jobDescription}
)

感谢您的输入，但在这种情况下，这不是我一直在寻找的正确解决方案，Nikko谢谢，Todor，这很有帮助，感谢您的支持！我得到了我需要的，并从中吸取了教训。

const Parent = () => (
    <Child 
        jobDescription={(
           <div style={{ flexDirection: 'column' }}>
              <div>1. Providing API calls support for Headless CMS.</div>
              <div>2. Provide escalated ticket/incident management support.</div>
           </div>
        )}
    />
)

const Child = (props) => (
    <div>
       <div>Child specific stuff</div>
       {props.jobDescription}
    </div>
)