Question

我可以将children={someArray}作为道具传递给组件而不会混淆props.children的命名空间吗？我试过了，我真的很惊讶它似乎没有破坏任何东西。不过，这似乎是一个非常糟糕的主意。我是否应该关注潜在的碰撞事件，或者React是否会以某种方式防范这种情况？

对于上下文，我正在写一个HOC来在列表中创建一个手风琴式的行，为了重用，我想让它传递的道具尽可能简单和通用。父母/子女范式似乎最直观。

这是一个简化版本：

function ProductList(props) {
  return (
    <List>
      {props.products.map(product => ( 
        <ProductWithVarieties parent={product} children={product.varieties} key={item.id} />
      ))}
    </List>
  )
}

function withChildren(ParentComponent, ChildComponent) {
  return class extends React.Component {
    // OMMITTED: a constructor, some life cycle hooks, event handlers, etc.
    render(props) {
      const renderChildren = () => {
        return this.props.children.map(child => {
          return <ChildComponent {...child} key={child.id}/>
        })
      }
      return (
        <div>
          <ParentComponent 
            {...this.props.parent} 
            onClick={this.toggleChildren}
            hasChildren={this.props.children.length > 0} />
          { this.state.showChildren ? renderChildren() : null }
        </div>
      )
    } 
  }
}

const ProductWithVarieties = withChildren(ProductComponent, VarietyComponent)

Answer 1

安全＆＃34;作为儿童道具传递它，但从标准的角度来说，你不应该这样做，而是把它称为不同的东西

传递一个名为“children”的组件道具是否安全？

1 个答案: