从孙子组件传播方法

Question

我有一个哑组件，List，它有一些定义如下的方法：

class List extends React.Component {
    ...
    scrollTo() {
    ...
    }
    clear() {
    ...
    }
}

然后我在父组件中使用它，假设UsersList：

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

然后我作为父母有FriendsPage：

class FriendsPage extends React.Component {
    render() {
        return (
            ...
            <UsersList ref={(ref) => { this.usersListRef = ref; }} {...} />
        );
    }
}

例如，我希望能够在FriendsPage中调用this.usersListRef.scrollTo()，而不必在UsersList中定义List的方法。

我可以传递一个名为 listRef 的道具并将其用作ref={this.props.listRef}但我想知道是否存在另一种解决方案。

Answer 1

你不能调用孩子的函数，这也违背了反应的想法。理想情况下，您的<UserList>组件接受一个道具，使其知道滚动到哪里。像这样：

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
    }
}

然后你的<FriendsPage>可能看起来像这样：

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} />;
    }
}

很难判断这是否是您需要的 100% 方法，因为您没有提供有关导致滚动的条件的许多详细信息。

Answer 2

嗯，我不确定我是否做对了，但你应该阅读这个：https://reactjs.org/docs/thinking-in-react.html

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

例如：

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

然后我在父组件中使用它，假设 UsersList：

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

然后我有作为父母我有朋友页面：

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

Answer 3

我忘了检查这方面的文档，这里有一段关于它的：https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components。

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

谢谢大家！