Question

我有一个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实例？还是有其他方法可以避免这种不连续性？

Answer 1

您无法在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中访问它，并且始终可以从{{ 1}}向TextField提供了TextField的{{1}}状态的value道具后。

访问从外部库导入的React元素的功能

1 个答案: