React组件传递含链接props无报错实现方案咨询

问题根源分析 #

1. 第一种写法的报错原因：
   你在CheckBox组件里把HTML标签<label>拼写成了<lable>，浏览器无法识别这个不存在的标签，所以抛出了"标签不被识别"的警告。你的JSX片段传递逻辑本身是正确的，只是组件内部的标签拼写错误导致了报错。

2. 第二种写法的显示异常原因：
   用模板字符串包裹JSX时，<Link>这个React元素会被当成普通对象处理，转成字符串后就变成了[object Object]，所以页面显示出不符合预期的内容，这种写法不适合传递JSX类型的props。

解决方案 #

只需要修正CheckBox组件里的标签拼写错误，第一种写法就能正常工作：

export default function CheckBox({ id, type = "checkbox", title, isError }) {
  return (
    <div className="checkbox">
      <input
        type={type}
        name={id}
        className={`checkbox__input ${isError && "checkbox__input_error"}`}
      />
      {/* 修正拼写：lable → label */}
      <label htmlFor={id} className="checkbox__title">
        {title}
      </label>
    </div>
  );
}

修正后，继续使用第一种写法传递带链接的文本即可：

const termsOfUseLableText = (
   <>
      I agree with
      <Link to="/" target="_blank">
         Terms of Use
      </Link>
   </>
);

<CheckBox id="termsOfUse" title={termsOfUseLableText} />

这样页面能正常渲染带链接的文本，控制台也不会再出现警告。

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