Question

我有一个组件体系结构，其中有一个Navigation组件，其中包含几个独特的Navigation Button组件。每个导航按钮组件都包含一个由A标签和I标签组成的Nav Item组件。

它看起来像：

导航>导航按钮>导航项目> A标签/ I标签

我的任务是实现一些DOM操作功能，并且需要访问放置在导航项组件的A标签和I标签上的唯一引用。

A标签和I标签上的引用都必须是唯一的，并且与其父级“导航按钮”组件相关。

最后，我最终需要将所有这些Refs存储在类似数组的结构中，然后将它们发送回顶级Navigation组件进行状态管理。

我曾尝试在Button Component级别创建一个引用，并将其作为道具放置在A标签和I标签上，但是该值变为空。

似乎在很多情况下，引用均被覆盖，并且动态生成引用被证明是具有挑战性的。

问题：是否有人对我如何成功提供导航项目的A标签和I标签唯一引用具有任何建议，这些引用以后可以与其他A的引用一起存储在数据结构中-tags和I-tags，将由父级Navigation组件使用？

尽管我已经简化了很多代码，但是一般的组件架构看起来像这样：

几个独特的按钮组件，如下所示：

class ButtonOne extends React.Component {
constructor(props) {
    super(props);

    // Some state stuff happens here
    this.buttonOneRef = React.createRef();
}


render(
    <Nav.Item 
        buttonRef = { this.buttonOneRef }
        />
);

    export default ButtonOne
}

一个看起来像NavItem的组件

class NavItem extends React.Component {

constructor(props) {
    super(props);

    // Some state stuff happens here
}

const dropdownIcon = (
    <React.Fragment>
        <i ref={`${this.props.buttonRef}-${this.props.label}-i`/>
    </React.Fragment>
)

const link = (
    <React.Fragment>
        <a ref={`${this.props.buttonRef}-${this.props.label}-a`>{this.props.label}</a>
    </React.Fragment>
)
return (
    <li>
       {link}
       {dropdownIcon}
    </li>

export default NavItem
}

还有一个外观类似于

的导航组件

class Nav extends React.Component {
    constructor(props) {
        super(props);

        // Some state stuff happens here
    }

    render() {
        const childrenItems = React.Children.map(this.props.children), (child, index) => {
            return (
                React.cloneElement(iteem, {
                    // Some Props here
                })
            )
        }
    }

    return (
         <nav>
            <ul>
                {childrenItems}
            </ul>
        </nav >    
     )

    export default Nav
  }

在高阶组件中传递React Ref

0 个答案: