[英]How to convert complex React class component to functional component?
I have a React.Component
that uses a lot of its features to a functional component.我有一个React.Component
,它在功能组件中使用了它的许多特性。 I'm not sure how many of these pieces can be converted without breaking existing functionality.我不确定在不破坏现有功能的情况下可以转换多少这些部分。 Here is what my class looks like:这是我的班级的样子:
export default class Dapp extends React.Component<Props, State> {
provider!: Web3Provider;
contract!: NftContractType;
private merkleProofManualAddressInput!: HTMLInputElement;
constructor(props: Props) {
super(props);
this.state = defaultState;
}
componentDidMount = async () => {
const browserProvider = await detectEthereumProvider() as ExternalProvider;
this.provider = new ethers.providers.Web3Provider(browserProvider);
this.registerWalletEvents(browserProvider);
await this.initWallet();
}
private isContractReady(): boolean {
return this.contract !== undefined;
}
render() {
return (
<>
{this.isWalletConnected() ?
<>
{this.isContractReady() ?
<>
<CollectionStatus
userAddress={this.state.userAddress}
maxSupply={this.state.maxSupply}
totalSupply={this.state.totalSupply}
isPaused={this.state.isPaused}
isWhitelistMintEnabled={this.state.isWhitelistMintEnabled}
isUserInWhitelist={this.state.isUserInWhitelist}
/>
</>
: <div>Connected</div>}
</>
);
}
private async initWallet(): Promise<void> {
const walletAccounts = await this.provider.listAccounts();
this.setState(defaultState);
if (walletAccounts.length === 0) {
return;
}
const network = await this.provider.getNetwork();
let networkConfig: NetworkConfigInterface;
if (network.chainId === CollectionConfig.mainnet.chainId) {
networkConfig = CollectionConfig.mainnet;
} else if (network.chainId === CollectionConfig.testnet.chainId) {
networkConfig = CollectionConfig.testnet;
} else {
this.setError('Unsupported network!');
return;
}
this.setState({
userAddress: walletAccounts[0],
network,
networkConfig,
});
if (await this.provider.getCode(CollectionConfig.contractAddress!) === '0x') {
this.setError('Could not find the contract, are you connected to the right chain?');
return;
}
this.contract = new ethers.Contract(
CollectionConfig.contractAddress!,
ContractAbi,
this.provider.getSigner(),
) as unknown as NftContractType;
this.setState({
maxSupply: (await this.contract.maxSupply()).toNumber(),
totalSupply: (await this.contract.totalSupply()).toNumber(),
maxMintAmountPerTx: (await this.contract.maxMintAmountPerTx()).toNumber(),
tokenPrice: await this.contract.cost(),
isPaused: await this.contract.paused(),
isWhitelistMintEnabled: await this.contract.whitelistMintEnabled(),
isUserInWhitelist: Whitelist.contains(this.state.userAddress ?? ''),
});
}
I'm having trouble understanding how to convert componentDidMount
to a function.我无法理解如何将componentDidMount
转换为函数。 These are just some of the pieces, but enough to help me get through the rest.这些只是其中的一部分,但足以帮助我完成其余部分。 Thanks for any help or guidance.感谢您的任何帮助或指导。
componentDidMount
可以用useEffect
钩子代替: https ://reactjs.org/docs/hooks-effect.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.