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

Question

更新：随着 @wawka 深入研究文档并发现这个应该工作，但是在 react-router 中有一些不稳定的设置-dom v^5.0.1。我仍在研究它，但是，这看起来可能需要重写 myLink2 组件。

使用 React 我有一个组件，我需要传递一个 'id' 道具来在 html 锚点上呈现一个 id。从这个锚点的最低 return 级别开始，向上我们有：

// 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 是 protected/special 吗？我是否需要将 props 上的展开运算符分配给 EditLink 组件？我在某处错过了一个通过点吗？我特别困惑，因为类似的问题表明传播运算符是做我正在寻找的事情的正确方法。

非常感谢指导！

Answer 1

根据所有研究，这个应该有效。因为它不会出现在我的应用程序中，解决方法是使用第三个 MyLink3。我将它设置为准系统 link 渲染并将组件传递给 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>
  )
}

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

Passing props via spread operator in React

javascript

reactjs

react-props