Question

我正在尝试将以下代码发送到React js中的子组件：

{
    carPhoto: "../../images/small-logo.jpg",
    make: "Mercedes",
    price: "€20000",
    desc: "Vivamus gravida magna massa in cursus mi"
}

现在我试图将 desc 分成两行。我试过 \ n ， \ r ， \ r \ n

desc: "Vivamus gravida magna<br /> massa in cursus mi"
desc: "Vivamus gravida magna\nmassa in cursus mi"
desc: "Vivamus gravida magna\r\nmassa in cursus mi"

但没有任何效果。有什么建议吗？

Answer 1

<span>
 Example #1: <br /> newline
</span>
<span style={{ whiteSpace: 'pre-wrap' }}>
 {"Example #2: \r new line or \u000A new line"}
</span>
{/* do not forget add style { white-space: pre-wrap } */}
<Example3 text={"Example #2: \r new line or \u000A new line"} />

Answer 2

您可以按照评论中的建议使用CSS。或者您可以dangerously set inner HTML使用<br/>代码：

<div dangerouslySetInnerHTML={{__html: this.props.desc}} />

值得注意的是，这种方法很容易出现XSS，因此就是名称。

您可以在此处阅读更多内容：https://facebook.github.io/react/tips/dangerously-set-inner-html.html

Answer 3

在React中做空白或换行的简便方法是使用它创建模块，如下所示：（并且不要忘记为容器添加空白：pre或pre-wrap;）

// htmlCodes.js
export const nbsp = '\u00A0';
export const breakline = '\u000A';

，然后在组件或字符串中使用它：

// MyComponent.jsx
import {nbsp, breakline} from './htmlCodes';

const myString = `one{nbsp}two{breakline}`;

const MyComponent = () => {
  <div style={{ whiteSpace: 'pre-wrap' }}>
    first{nbsp}second{breakline}third
  </div>
}

最好的方法，创建组件文本并一起使用：

// Text.jsx
export const Text = (children) => {
  <span style={{ whiteSpace: 'pre-wrap' }}>
    {children}
  </span> 
}

// MyComponent.jsx
import {nbsp, breakline} from './htmlCodes';
import {Text} from './Text.jsx';

const MyComponent = () => {
  <div>
   <Text>one{nbsp}two{breakline}three</Text>
  </div>
}

反应新线

3 个答案: