在 React 中通过扩展运算符传递道具

Question

更新：plot 在此组件上已大大加厚，因为@wawka 深入文档并发现这应该可以工作，但是 react-router-dom v^5.0.1 中有一些不稳定的设置。 我仍在处理它，但这看起来可能需要重写myLink2组件。

使用 React 我有一个组件，我需要传递一个“id”道具来在 html 锚上呈现一个 id。 从这个锚点的最低回报水平开始，我们有：

// links.jsx
export const MyLink = ({children, location, ...props}) => {
  const href = "mydomain.com" + location;
  return (
    <a href={href} {...props}>{children}</a>
  )
}
export const MyLink2 = ({children, location, ...props}) => {
  return (
    <RouterLink to={location} {...props}>{children}</RouterLink>
  )
}

//components.jsx
export const Block = ({linkLocation, htmlId, children, externalLink: isExternalLink}) => {
  const EditLink = isExternalLink ? MyLink : MyLink2;
  return <div className="outer-div">
    <div className="inner-div">
      {children}
    </div>
 
    <EditLink location={editLocation} id={htmlId}>{translate('edit')}</EditLink>
  </div>
}

export const Summary = ({info1, info2, info3}) => {
  return <Block editLocation={'/edit/location/' + info2} htmlId={'i-am-id-' + info2}>
    <div>{info1}</div>
    <div>{info2}</div>
    <div>{info3}</div>
  </Block>
}

该htmlId是我正在寻求传递给myLink以分配锚点的 id 属性，但在页面呈现时它不会出现。 是因为 id 是受保护/特殊的吗？ 我是否需要将 props 上的扩展运算符分配给EditLink组件？ 我在某个地方错过了一个通过点吗？ 我特别困惑，因为类似的问题表明传播运算符是做我正在寻找的正确的事情。

指导将不胜感激！

Answer 1

根据所有研究，这应该有效。 因为它不会在我的应用程序中，所以解决方法是使用第三个MyLink3 。 我将其设置为准系统链接渲染并将组件传递给MyLink2 。

像这样：

// links.jsx
export const MyLink = ({children, location, ...props}) => {
  const href = "mydomain.com" + location;
  return (
    <a href={href} {...props}>{children}</a>
  )
}
export const MyLink2 = ({children, location, ...props}) => {
  return (
    <RouterLink to={location} component={MyLink3} {...props}>{children}</RouterLink>
  )
}
export const MyLink3 = ({children, location, ...props}) => {
  return (
    <a href={href} {...props}>{children}</a>
  )
}