问题起因：

1. 业务方想要textArea框的placeholder换行，然后我稍微查了一下资料，都说用
2. 符号就行；然后我不管用原生html还是Antd的TextArea组件直接给placeholder属性赋值，使用 符号都没问题；
3. 但是我们的组件库是组内自己进行了二次封装，这里会贴上更直观的伪代码供大佬们参考。

案例展示

直接给antd的TextArea组件placeholder属性赋值

    <>
      {isText ? (
        <span className="x-form__item_text">{value}</span>
      ) : (
        <Input.TextArea
          disabled={disabled ?? undefined}
          autoSize={autoSize}
          value={value}
          style={{ width, ...style }}
          placeholder="first&#10;Second"
        />
      )}
    </>

结果证明没问题，能实现预期的换行效果，好用！

使用对象解构的形式，给Antd组件传自定义参数

  rest.placeholder = "first
Second"
  const autoSize = _autoSize ? _autoSize : { minRows: 3 };
  return (
    <>
      {isText ? (
        <span className="x-form__item_text">{value}</span>
      ) : (
        <Input.TextArea
          disabled={disabled ?? undefined}
          autoSize={autoSize}
          value={value}
          style={{ width, ...style }}
          placeholder="请输入"
          {...rest}
        />
      )}
    </>
  );

根据效果来看，传入自定义组件属性placeholder以后，换行编码 并没有生效，而是直接以字符串的形式输出。

改进方案

尝试使用/n换行符来替带换行编码 结果却可以达到要求！？

  rest.placeholder = "使用了换行符first\nSecond"
  const autoSize = _autoSize ? _autoSize : { minRows: 3 };
  return (
    <>
      {isText ? (
        <span className="x-form__item_text">{value}</span>
      ) : (
        <Input.TextArea
          disabled={disabled ?? undefined}
          autoSize={autoSize}
          value={value}
          style={{ width, ...style }}
          placeholder="请输入"
          {...rest}
        />
      )}
    </>
  );

总结

感觉问题有两点：

1. jsx中使用{...rest}来进行对象解构，背后到底产生了那些变化？
2. /n换行符和unicode编码中的 究竟有哪些区别？

热切期盼各位大佬不吝赐教！