Question

尝试使用ref从其父组件调用组件的函数。该组件已连接到Redux。使用React ^ 16。说：TypeError: this.usersTable.getWrappedInstance is not a function。参见下面的代码示例：

export default class Users extends Component {
    constructor(props){
        super(props)
        this.usersTable = React.createRef()
    }

    render() {
        return (
            <div>
                <button type="button"
                        onClick={this.usersTable.getWrappedInstance().onAddUser}>ADD NEW USER</button>

                <UsersTable onRef={node => this.usersTable = node} />
            </div>
        )
    }
}

class UsersTable extends Component {
    componentDidMount() {
        this.props.onRef(this)
    }

    onAddUser = () => {
        // DO SMTH
    }
}
export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(UsersTable)

Answer 1

this.usersTable.getWrappedInstance()在指定usersTable引用之前急切地在渲染器上进行评估。

引用混合在一起。它是React.createRef()或自定义onRef，但不能两者都用。后者不需要getWrappedInstance()，但需要将props传递给具有映射功能的包装组件。

如果使用React.createRef()，则为：

usersTable = React.createRef();

onButtonClick = () => {
  this.usersTable.current.getWrappedInstance().onAddUser();
}    

...

<button type="button" onClick={this.onButtonClick}>
  ADD NEW USER
</button>

<UsersTable ref={this.usersTable} />

使用ref从React调用Redux连接的组件

1 个答案: