如何在從以下代碼段中的另一個類導入的自定義 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"
           />

在這里，我想在第 2 個點之后斷線，我嘗試了 '\\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

使用數組，然后循環數組輸出

對於每個項目。 使用 string 不起作用，因為它在進入 props 時被轉義。 雖然我知道它可能不適合職位描述領域。

或者，您可以在字符串中編寫 html 標簽，然后使用https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml進行渲染，風險自負。

Answer 2

我會通過將 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>
)