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

我有一个React组件库（我们称之为MyLibrary），它通过babel传输，导出为NPM包，并提供给另一个repo（MyProject）。在MyLibrary中，我有一个component TextField，它提供了以下功能：

export default class TextField extends Component {

...

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

getValue

函数已正确绑定到定义类中的

this

，当我从MyLibrary中的其他组件调用该函数时，该函数可用

但是，当我在MyProject中工作时，我运行了

npm install MyLibrary

并导入了如下文本字段：

import { TextField } from 'MyLibrary';

...

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

我收到以下错误消息：

Uncaught TypeError: field.getValue is not a function

在控制台日志中显示

字段

变量的属性时，我看到以下内容：

$$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类的一部分导出的。我的

字段

变量似乎在代码中被识别为符号类型，而不是文本字段类型。有没有办法直接检索TextField实例？或者是否有其他方法可以避免这种不连续性？

您无法在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} />
    );
}

//MyLibrary/TextField.js
类TextField扩展组件{
建造师（道具）{
超级（道具）；
此.state={
值：null
};
this.setValue=this.setValue.bind（this）；
}
设置值（值）{
this.setState（{value}，（）=>this.props.setValue（value））；
}
...
}
//我的项目
...
设置值（值）{
this.setState（{value}）
}
render（）{
返回(
);
}

---

您还可以从

TextField

的状态中删除

value

，因为您始终可以在状态

MyProject

中访问它，在提供了

TextField

的

value

从

MyProject

状态读取的

道具后，您可以始终从
TextField
的道具读取值：
谢谢您提供的信息。您是否可以提供任何其他详细信息，说明为什么该类方法在其自身的repo中可用，但在从库导入时不可用？这似乎与类的工作方式背道而驰，至少在其他语言中是如此。
// 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} />
    );
}