如何在以下代码段中从另一个类导入的自定义 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 = () => (

    <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>

)

Answer 2

使用数组，然后循环数组输出

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