Javascript 从grand child组件传播方法

我有一个哑组件，

List

，它有一些定义如下的方法：

class List extends React.Component {
    ...

    scrollTo() {
    ...
    }

    clear() {
    ...
    }
}

class FriendsPage extends React.Component {

    handleSelectionChange = selected => {
        // triggered when the selected element in the list changes
        this.setState({selected});
    }

    render() {
        const {selected} = this.state;

        return <UserList activeItem={selected} {...this.props} />;
    }
}

然后我在父组件中使用它，比如说

UsersList

：

class UsersList extends React.Component {
    render() {
        return <List {...this.props} {...} />;
    }
}

我希望能够调用

this.usersListRef.scrollTo（）

，例如在

FriendsPage

中，而不必在

UsersList

中定义

列表的方法

我可以传递一个名为
listRef
的prop，并将其用作
ref={this.props.listRef}
，但我想知道是否存在另一种解决方案。
您不能调用子级函数，这也违背了react的思想。理想情况下，
组件接受一个道具，使其知道滚动到哪里。比如：

class UserList extends React.Component {

    componentDidUpdate() {
        const {activeItem} = this.props;
        this.scrollTo(activeItem);
    }

    scrollTo = activeItem => {
        // calculate position of active item to scroll to
        // and scroll to it
    }
}

然后，您的
可能看起来像这样：

class List extends React.Component {
    ...

    scrollTo() {
    ...
    }

    clear() {
    ...
    }
}

class FriendsPage extends React.Component {

    handleSelectionChange = selected => {
        // triggered when the selected element in the list changes
        this.setState({selected});
    }

    render() {
        const {selected} = this.state;

        return <UserList activeItem={selected} {...this.props} />;
    }
}

class-FriendsPage扩展了React.Component{
handleSelectionChange=selected=>{
//当列表中的选定元素更改时触发
this.setState（{selected}）；
}
render（）{
const{selected}=this.state；
返回；
}
}

很难说这是否是您需要的100%的方法，因为您没有提供有关导致滚动的条件的许多详细信息。
嗯，我不确定是否正确，但您应该阅读以下内容：

在React中，想法是自上而下。当用户与列表组件交互时，需要UsersList组件执行某些操作，因此应该在UsersList中定义函数，并将该函数作为道具传递给列表组件

例如：

class List extends React.Component {
    <div onClick={this.props.scrollTo}
}

类列表扩展了React.Component{
我忘了检查这篇文章的文档，这里有一段关于它的内容：

基本上，这是我在问题中设想的解决方案，使用
listRef
并将其传递到我的
List
组件所在的位置

谢谢大家！
理想情况下，我不想在我的
列表
组件中实现一些逻辑，因为它非常愚蠢，并且希望保持这种方式，特别是因为它可以有很多方法来做不同的事情，但感谢指针。@bhulnatik如果你想让
列表
组件愚蠢，它不应该有任何逻辑这显然不是愚蠢的。
class FriendsPage extends React.Component {
    render() {
        return (
            ...
            <UsersList {...} />
        );
    }
}