Доступ к функции элемента React, импортированного из внешней библиотеки - PullRequest
Новая
       27

Доступ к функции элемента React, импортированного из внешней библиотеки

0 голосов
/ 14 ноября 2018

У меня есть библиотека компонентов React (назовем ее MyLibrary), которая поставляется с babel, экспортируется в виде пакета NPM и становится доступной для другого репо (MyProject). В MyLibrary у меня есть компонент TextField, который делает доступной следующую функцию: 

export default class TextField extends Component {

...

    getValue() {
        return this.state.value;
    }
}

Функция getValue правильно связана с this в определенном классе, и эта функция доступна, когда я вызываю ее из других компонентов внутри MyLibrary.

Однако, когда я вместо этого работаю в MyProject, и я запустил npm install MyLibrary и импортировал TextField следующим образом: 

import { TextField } from 'MyLibrary';

...

render() {
    this.field = <TextField id="testField" />;
    return field;
}

В другом месте кода, когда я пытаюсь получить доступ к экспортированной функции, вот так: 

console.log('Retrieving the value of the text field:', this.field.getValue());

Я получаю следующее сообщение об ошибке: 

Uncaught TypeError: field.getValue is not a function

Отображая свойства переменной field в журнале консоли, я вижу следующее: 

$$typeof: Symbol(react.element)
key: null
props: {id: "testField", labelText: "", invalidMessage: "", placeholder: "", spellCheck: false, …}
ref: null
type: ƒ TextField(props)
_owner: FiberNode {tag: 2, key: null, type: ƒ, stateNode: AddEditForm, return: FiberNode, …}
_store: {validated: false}
_self: null
_source: null
__proto__: Object

Кажется, что getValue вообще не доступен как функция, даже если он экспортируется как часть класса TextField. Похоже, что моя переменная field распознается в коде как тип Symbol, а не как тип TextField. Есть ли способ получить экземпляр TextField напрямую? Или я каким-то образом могу избежать этого разрыва?

1 Ответ

0 голосов
/ 14 ноября 2018

Нет способа получить доступ к функции, определенной в компоненте в контексте React.

Лучшим решением было бы иметь функцию, которая устанавливает значение внутри MyProject, и использовать ее в качестве реквизита.для вашего TextField компонента.Примерно так: 

// MyLibrary/TextField.js

class TextField extends Component {
    constructor (props) {
        super(props);

        this.state = {
            value: null
        };
        this.setValue = this.setValue.bind(this);
    }

    setValue (value) {
        this.setState({ value }, () => this.props.setValue(value));
    }

    ...
}

// MyProject
...

setValue(value) {
    this.setState({ value })
}

render() {
    return (
        <TextField
            setValue={this.setValue} />
    );
}

Вы также можете удалить value из состояния TextField, поскольку у вас всегда есть доступ к нему в состоянии MyProject, и вы всегда можете прочитать значение изреквизиты TextField после предоставления TextField реквизитом value, считанным из состояния MyProject: <TextField setValue={this.setValue} value={this.state.value} />.

...