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; }} {...} />
        );
    }
}

我希望能够在this.usersListRef.scrollTo()中呼叫FriendsPage，而无需在List中定义UsersList的方法。

我可以传递名为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组件在用户与List组件交互时执行某些操作时，您应该在UsersList中定义该函数，并将该函数作为prop组件传递给List Component。

例如：

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

然后我作为家长我有FriendsPage：

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组件的任何位置。

谢谢大家！

从grand-child组件传播方法

3 个答案: