如何从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");
    }
}