访问从外部库导入的 React 元素的函数

Question

I have a library of React components (we'll call it MyLibrary) that is transpiled with babel, exported as an NPM package, and made available to another repo (MyProject). Within MyLibrary, I have a component TextField that makes the following function available:

export default class TextField extends Component {

...

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

The getValue function is properly bound to this in the defined class, and this function is available when I call it from other components inside of MyLibrary.

However, when I am working in MyProject instead, and I have run npm install MyLibrary and imported TextField like so:

import { TextField } from 'MyLibrary';

...

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

Elsewhere in the code, when I attempt to access the exported function like so:

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

I get the following error message:

Uncaught TypeError: field.getValue is not a function

Displaying the properties of the field variable in the console log, I see the following:

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

It seems that getValue is not available as a function at all, even though it is exported as part of the TextField class. It appears that my field variable is recognized in the code as a Symbol type rather than as a TextField type. Is there a way to retrieve the TextField instance directly? Or is there some way I can otherwise avoid this discontinuity?

Answer 1

There is no way that you can access the function defined in a component within React context.

The best solution would be to have a function that sets the value inside MyProject and use it as a prop for your TextField component. Something like this:

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

You can also remove value from the state of TextField as you have always access to it within the state MyProject , and you can always read the value from the props of TextField after providing TextField with the value prop read from the state of MyProject : <TextField setValue={this.setValue} value={this.state.value} /> .