php - 将 nextjs 应用程序转换为 wordpress 简码

Question

我需要一些帮助。

我真的很喜欢 WordPress 作为 cms，但我不是 PHP 的粉丝。我偶然发现了 Next.js，并在那里迈出了第一步，这对我来说很棒。我只想将 WordPress 与 Divi 一起用于我的前端，并使用 next.js 构建组件和功能以摆脱 PHP。

我在 BSC 上创建了一个代币，我想为它创建一个空投系统。

现在我的问题是：如何将我的 Next.js 组件放入 WordPress 短代码中？

示例组件：index.js

import { useState, useEffect } from 'react';
import Web3 from 'web3';
import getBlockchain from './ethereum.js';


export default function Home() {
   const [loading, setLoading] = useState(true);
   const [loadingMessage, setLoadingMessage] = useState('Loading...');
   const [claimMessage, setClaimMessage] = useState({
      payload: undefined,
      type: undefined
   });
   const [airdrop, setAirdrop] = useState(undefined);
   const [accounts, setAccounts] = useState(undefined);

   useEffect(() => {
     const init = async () => {
       try { 
          const { airdrop, accounts } = await getBlockchain();
          setAirdrop(airdrop);
          setAccounts(accounts);
          setLoading(false);
       } catch(e) {
          setLoadingMessage(e);
       }
     };
     init();
   }, []);

   const claimTokens = async e => {
     e.preventDefault();
     const address = accounts[0];
     const totalAllocation = 100000000000000000000000;
     try{
       setClaimMessage({
         type: 'primary',
         payload: `Claiming token from Airdrop contract...\nAddress: ${address}\nTotal Amount: 
 ${Web3.utils.fromWei(totalAllocation.toString())} MadDoge`
       });
       const receipt = await airdrop
         .methods
         .claimTokens(
            address, 
      totalAllocation.toString()
    )
    .send({from: address});
  setClaimMessage({
    type: 'primary',
    payload: `Airdrop success!\nTokens successfully in tx ${receipt.transactionHash} \nAddress: ${address}\nTotal Amount: ${Web3.utils.fromWei(totalAllocation.toString())} MadDoge`
  });
} catch(e) {
    setClaimMessage({
      type: 'danger',
      payload: `Airdrop had been claimd !!\nAddress:- ${address}`
    });
}
   };

   return (
<div className='container'>

  {loading ? (
    <div className='row mt-4'>
      <div className='col-sm-12'>
        <div className="jumbotron">
          <h3 className='text-center'>{loadingMessage}</h3>
        </div>
      </div>
    </div>
  ) : null}

  {loading ? null : (
    <div className='row mt-4'>
      <div className='col-sm-12'>
        <div className="jumbotron">
          <form className="form-inline" onSubmit={e => claimTokens(e)}>
            <button 
              type="submit" 
              className="btn btn-primary mb-2 col-sm-12"
            >
              Claim airdrop
            </button>
          </form>
          <div>
            {typeof claimMessage.payload !== 'undefined' ?  (
              <div className={`alert alert-${claimMessage.type}`} role="alert">
                <span style={{ whiteSpace: 'pre' }}>
                  {claimMessage.payload}
                </span>
              </div>
            ) : ''}
          </div>
        </div>
      </div>
    </div>
  )}
</div>

);

标签： phpwordpressnext.jsshortcodesmartcontracts