React组件中如何以函数形式渲染段落？排查渲染失效问题

• 核心错误：未调用paragraph函数
  你在Article组件里写的<p>{paragraph}</p>，只是把函数本身传递给了React，没有执行它。React无法直接渲染函数对象，必须调用函数获取返回的JSX元素，所以要改成{paragraph()}。

• 额外优化点1：组件命名规范
  React要求组件首字母大写，否则会被当成普通HTML标签处理。虽然你这里是作为函数调用，但改成大写的Paragraph会更符合React规范，避免潜在问题。

• 额外优化点2：语义化与多余换行问题
  你当前用<br />分隔段落，会导致原文本中的空行也生成<br />，出现多余空白。更合理的做法是过滤掉空行，每个段落用<p>标签包裹，既符合HTML语义，也能正确渲染段落间距。

修正后的代码 #

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const covidText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a cras. Vitae suscipit tellus mauris a diam maecenas sed enim. Integer enim neque volutpat ac tincidunt vitae. Sapien et ligula ullamcorper malesuada proin. Habitant morbi tristique senectus et netus et malesuada fames. Dui faucibus in ornare quam viverra orci. Interdum velit euismod in pellentesque massa placerat duis ultricies. Pellentesque nec nam aliquam sem et. Leo integer malesuada nunc vel risus commodo viverra.

Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Urna nec tincidunt praesent semper feugiat nibh sed. Sit amet massa vitae tortor condimentum. Aliquam sem et tortor consequat. Orci ac auctor augue mauris. Integer quis auctor elit sed vulputate mi sit amet mauris. Justo donec enim diam vulputate ut pharetra. Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Feugiat scelerisque varius morbi enim nunc faucibus a.

Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Consequat mauris nunc congue nisi vitae suscipit tellus mauris. Sit amet massa vitae tortor condimentum lacinia quis vel. Felis donec et odio pellentesque diam volutpat. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Vel turpis nunc eget lorem dolor. Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. Quis hendrerit dolor magna eget est lorem ipsum.

Ut diam quam nulla porttitor massa id neque. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Neque aliquam vestibulum morbi blandit. Enim blandit volutpat maecenas volutpat. Nunc sed blandit libero volutpat. Libero volutpat sed cras ornare arcu`

// 首字母大写符合组件规范，过滤空行并用p标签包裹段落
const Paragraph = () =>
  covidText.split("\n")
    .filter(text => text.trim() !== "") // 过滤空文本行
    .map((text, index) => <p key={index}>{text}</p>);

const Article = () => {
  return (
    <div>
      <h1>This is the title</h1>
      {/* 调用函数组件，也可以写成<Paragraph /> */}
      {Paragraph()}
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Article />, rootElement);

说明：

• 现在Paragraph组件会过滤原文本的空行，每个段落用<p>标签包裹，渲染结构更语义化，段落间距更合理。
• 在Article组件里，{Paragraph()}也可以改成<Paragraph />，两种写法都能正常工作，后者更符合React组件的使用习惯。

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