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

Question

          <Experience

           startYear={2019}

           endYear={2019}

           jobName="First Job"

           jobDescription="1. Providing API calls support for Headless CMS.2. Provide escalated ticket/incident management support"

           />

在这里，我想在第二点之后换行，我尝试了 '\n' 和 br，这个标签是通过以下代码在 JSX 中制作的：

       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;

Answer 1

我会通过将 jsx 组件作为道具传递给孩子，而不仅仅是原始文本。这使您可以更灵活地控制 UI 在父组件中的呈现/排序方式。const Parent = () => (&nbsp; &nbsp; <Child&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; jobDescription={(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div style={{ flexDirection: 'column' }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>1. Providing API calls support for Headless CMS.</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>2. Provide escalated ticket/incident management support.</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; />)const Child = (props) => (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp;<div>Child specific stuff</div>&nbsp; &nbsp; &nbsp; &nbsp;{props.jobDescription}&nbsp; &nbsp; </div>)

Answer 2

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