javascript - 定位 this.props.children 的特定子项

Question

我有一个<Panel />组件结构如下:

import React, {Component, PropTypes} from 'react';

export default class Panel extends Component {

    static propTypes = {
        children: PropTypes.object,
        scrollable: PropTypes.bool,
        swipeable: PropTypes.bool
    };

    static defaultProps = {
        scrollable: true,
        swipeable: false
    };

    render() {
        const styles = require('./Panel.css');

        const {
            children,
            scrollable
        } = this.props;

        return (
            <div className={styles.Base}>
                { scrollable ?
                    <div className={styles.ScrollArea}>{children}</div>
                    : {children}
                }
            </div>
        );
    }
}

它基本上只是一个包装组件，通常包含可滚动项目的列表。我这样使用它:

<Panel>
    <ul className={styles.FontMenu}>
        { fonts.map((font) => {
            return (
                <li
                    key={`font-menu-${font.id}`}
                    className={selectedFamily.id === font.id ? styles['FontMenuItem--isActive'] : styles.FontMenuItem}>
                    {font.label}
                </li>
            );
        })}
    </ul>
</Panel>

当面板安装时，我偶尔需要能够滚动到列表中的特定项目。我知道我想要滚动到的项目的索引，并且我想向 <Panel /> 添加一个方法需要 scrollTo 的组件prop 作为使用该索引的属性，但由于列表中的项目是动态子项，我不确定什么是明智的实现方式。

如何轻松定位组件的动态子组件并获取其属性？

Answer 1

我不确定如何实现您的问题的解决方案，因为我不知道如何设置scrollTo。如果它是基于子属性设置的，那么您可能需要在面板的 render() 中使用cloneElement 在子属性上设置自定义属性:

render(){
 return (
   <div>
     {this.renderChildren()}
   </div>
   
   )
  
}

renderChildren(){
  return React.Children.map(this.props.children, function(child){
    if (child.property1 === 'scrollHere'){
      return React.cloneElement(child, { shouldScrollToHere: true })
      else return child
    }.bind(this))
  } 

然后在面板的 componentDidMount() 中，也许您可​​以查看子项并滚动到正确的项目，也许可以使用 setState。