Вызовите компонент с подключением к редуксу из React, используя ref - PullRequest
Новая
       8

Вызовите компонент с подключением к редуксу из React, используя ref

0 голосов
/ 18 сентября 2018

Попытка вызвать функцию компонента из его родителя, используя 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)

1 Ответ

0 голосов
/ 18 сентября 2018

this.usersTable.getWrappedInstance() охотно оценивается при рендеринге до назначения usersTable ref.

Ссылки перепутаны.Это либо React.createRef(), либо пользовательский onRef, но не оба.Последнему не понадобится getWrappedInstance(), но требуется, чтобы реквизиты передавались в обернутый компонент с функциями отображения.

В случае использования 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} />
...