如何在组件props中传入JSX元素，解决返回NaN及添加间距的问题？

问题1：value渲染为NaN的修复方案 #

出现该问题的核心原因是传递给value的内容解析异常，可按以下步骤修复：

1. 先修正pre标签内的内容写法，将空格和变量用模板字符串包裹，避免JSX解析时的内容拼接异常：

<component
  title = {<strong>Name</strong>}
  value = {<pre>{`  ${name === undefined ? myName : myNames}`}</pre>}
/>

2. 如果修改后仍出现NaN，给变量增加兜底逻辑，避免undefined、null等非法值触发类型转换异常：

value = {<pre>{`  ${name === undefined ? (myName ?? '') : (myNames ?? '')}`}</pre>}

3. 若组件的value属性仅支持字符串类型不支持传入JSX元素，可改为传递带格式的内容，缩进通过pre的padding实现即可：

value = {<pre style={{paddingLeft: '2em'}}>{name === undefined ? (myName ?? '') : (myNames ?? '')}</pre>}

问题2：不修改组件源码添加title与value间距的方案 #

可通过以下三种方式实现，无需改动组件源码：

• 直接给传入的title元素添加下边距，注意设置为块级元素让上下margin生效：

title = {<strong style={{display: 'block', marginBottom: '8px'}}>Name</strong>}

• 给传入的value的pre元素添加上边距：

value = {<pre style={{marginTop: '8px'}}>{`  ${name === undefined ? myName : myNames}`}</pre>}

• 如果上述方案不生效，给组件外层套一个自定义容器，通过全局CSS选择器匹配组件内部的title、value对应DOM节点添加样式：

<div className="comp-wrapper">
  <component
    title = {<strong>Name</strong>}
    value = {<pre>{`  ${name === undefined ? myName : myNames}`}</pre>}
  />
</div>

对应的CSS样式（不同框架的全局选择器写法可根据技术栈调整）：

/* 以CSS Modules为例 */
.comp-wrapper :global(.component-title) {
  margin-bottom: 8px;
}
.comp-wrapper :global(.component-value) {
  margin-top: 8px;
}

你可以打开浏览器开发者工具，查看组件内部渲染的title和value对应的DOM节点的类名，替换上面的.component-title、.component-value即可生效。

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