条件为真后，将按钮转换为文本

发布于 2025-02-04 12:03:54 字数 977 浏览 1 评论 0原文

我正在使用材料-UI库的Appbar组件，我添加了一个按钮，我会说它是在Appbar中进行了硬编码的，我正在尝试将此按钮转换为Appbar中的文本，但是我什么也没得到。

如何将Appbar中的按钮转换为文本？

app.js：

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};

appbar：

<Button id={props.id} color={props.color} variant={props.variant} 
href="#contained-buttons" onClick={props.handle}>{props.text}</Button>

原文

I'm using the AppBar component of material-ui library, I added a button, I'd say it's hardcoded in the AppBar, I'm trying to transform this button to just a text in the AppBar, but I got nothing.

How can I transform the button in the AppBar to just text?

App.js:

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};

AppBar:

<Button id={props.id} color={props.color} variant={props.variant} 
href="#contained-buttons" onClick={props.handle}>{props.text}</Button>

Full code on Github.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2025-02-11 12:03:54

使用variant =“ text”而不是variant =“包含”用于将按钮转换为文本。

您的代码将是：

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};

use variant="text" instead of variant="contained" for transforming button into text.

your code will be :

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};

回复收藏 0 原文

~没有更多了~