javascript - 如何从 React.js 中的另一个文件实际启动一个函数

Question

我把它放在一个名为 User.jsx 的文件中

   shrink() {
        this.setState({shrunk: !this.state.shrunk});
        let stuff = document.querySelectorAll(".stuff");
        for (let i = 0; i < stuff.length; i++) {
            stuff[i].classList.toggle("do-something");
        }
    }

我正在导入另一个文件(称为“Person.jsx”)，如下所示:

import { shrink } from './User.jsx';

我尝试在 Person.jsx 文件中使用它，如下所示:

class Stuff extends React.Component {
    doStuff() {
      shrink(); **/* How do I actually initiate the function? */**
    }
    return (
        <div onClick={this.doStuff}>Yo!</div>
    )

}

我的问题是如何实际启动该功能以使其正常工作。

我也尝试过“返回”它:

return shrink(); 

但说“收缩”未定义......

Answer 1

您需要导出它

export function shrink() {
    this.setState({shrunk: !this.state.shrunk});
    let stuff = document.querySelectorAll(".stuff");
    for (let i = 0; i < stuff.length; i++) {
        stuff[i].classList.toggle("do-something");
    }
}