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

使用一个数组，然后循环该数组为每个项输出

。使用绳子不起作用，因为当它进入道具时会逃跑。虽然我知道它可能不适合工作描述领域。

或者，使用可以在字符串中写入html标记，然后使用https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml风险自负。