我尝试在需要时对调用函数进行代码拆分。
所以我将功能从组件中分离出来。
//Split.js
const Split = () => {
return <div>It`s text</div>;
};
export default Split;
它在 React 类组件中工作。
//App.js
class App extends Component {
state = {
Split: null
};
handleClick = () => {
import("./Split").then(({ default: Split }) => {
this.setState({
Split
});
});
};
render() {
const { Split } = this.state;
return (
<div>
<button onClick={this.handleClick}>Click Me</button>
{Split && <Split />}
</div>
);
}
}
这是类组件链接(工作) https://codesandbox.io/s/code-splitting-1-bbtpe
但是当我更改为 Hooks 函数组件时,它不起作用..
const App = () => {
const [split, setSplit] = useState(null);
const handleClick = () => {
import("./Split").then(({ default: Split }) => {
// console.log(SplitMe());
setSplit(Split);
});
};
const SplitMe = split;
return (
<div>
<button onClick={handleClick}>Click Me</button>
{SplitMe && <SplitMe />}
</div>
);
};
并引发错误
错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:对象。
这是功能组件链接(工作) https://codesandbox.io/s/code-splitting-2-4flbm
我能知道类组件的 setState 和函数组件的 setState(hook) 有什么不同吗?
谢谢!
最佳答案
setState
以及 useState
返回的函数采用两种类型的参数:
- 您可以直接为其设置一个值。
- 您可以向其传递一个函数,他们将使用之前的状态作为参数来调用该函数。
在函数版本中,您导入了一个函数Split
并将其用于:
setSplit(Split);
请注意Split
这是一个函数,适用的是 setState
的第二个版本。它会直接调用该函数,而不是将函数保留为组件。如果使用()
调用该组件,<Split />
的类型无效(因为React不能再调用它,它不是一个函数)
要解决这个问题,您可以存储 Split
作为一个对象,就像在类组件的情况下一样。
const [split, setSplit] = useState(null);
const handleClick = () => {
import("./Split").then(({ default: Split }) => {
setSplit({ Split });
});
};
const Split = split ? split.Split : null;
现在setSplit
将对象视为参数并直接设置它。
关于reactjs - react 。当在组件函数中导入函数时,我能知道为什么它不起作用 hooks setState..?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58618906/