React/JS行内添加换行求助：使用\n无法生效

问题 #

我在React/JS里找不到添加换行的方法，平时用\n但在React里好像没用。我想在StackCard组件的项目所有者信息和项目描述之间加换行，组件代码如下：

<StackCard imgsrc={img1}  projectOwner="Owner: Jeoffrey Baratheon"  projectDescription="Description: xxxxxx" cardtitle="Search Stack test 1" title="xxxxx" content="Test12"></StackCard>

解决方法 #

分两种场景处理：

1. 可修改StackCard组件代码

直接在组件内部渲染projectOwner和projectDescription的位置插入<br />标签即可：

// StackCard组件内部示例代码
function StackCard(props) {
  return (
    <div className="stack-card">
      {/* 其他渲染内容 */}
      <div className="project-details">
        {props.projectOwner}
        <br /> {/* 插入换行标签 */}
        {props.projectDescription}
      </div>
      {/* 其他渲染内容 */}
    </div>
  );
}

2. 无法修改StackCard组件

• 方法一：合并两个属性为带\n的字符串，同时给文本渲染容器添加white-space: pre-wrap样式（需组件支持传入样式）：

<StackCard 
  imgsrc={img1} 
  // 合并所有者与描述，用\n分隔
  projectOwner={`Owner: Jeoffrey Baratheon\nDescription: xxxxxx`}
  cardtitle="Search Stack test 1" 
  title="xxxxx" 
  content="Test12"
  // 假设组件支持传入文本容器样式
  detailStyle={{ whiteSpace: 'pre-wrap' }}
></StackCard>

• 方法二：若组件支持接收JSX类型属性值，直接传入包含<br />的React片段：

<StackCard 
  imgsrc={img1} 
  // 用片段包裹内容并插入换行
  projectInfo={
    <>
      Owner: Jeoffrey Baratheon
      <br />
      Description: xxxxxx
    </>
  }
  cardtitle="Search Stack test 1" 
  title="xxxxx" 
  content="Test12"
></StackCard>

内容的提问来源于stack exchange，提问作者Dfr444er