根据 React JS 中的 props 数据更改按钮大小答案

【问题标题】：Button size change on the basis of props data in React JS根据 React JS 中的 props 数据更改按钮大小
【发布时间】：2021-10-09 00:17:22
【问题描述】：

我想根据道具数据更改按钮的大小，如果有道具数据，那么按钮大小应该不同，如果没有道具数据，那么按钮大小应该不同。

<div className='projectBtn'>
  <a href={props.liveWebsite} target='_blank'>
    <button className='liveWebsiteBtn'>Live Website</button>
  </a>

  <a href={props.github} target='_blank'>
    <button className='githubBtn' hidden={!props.github}>
      Github Code
    </button>
  </a>
</div>;

为什么我应该隐藏，因为如果没有数据，那么应该禁用 GitHub 按钮。

这是我的数据源文件 Sdata.jsx

const Sdata = [
{
    imgsrc: jokes,
    title: "Jokes Web App using API",
    desc: "This React-JS Jokes App built up using API.",
    tech1: "React",
    tech2: "Jokes API",
    tech3: "Axios",
    tech4: "Github",
    liveWebsite:"example.com",
    github: "example.com"
},

【问题讨论】：

问题是什么？有什么事情没有按预期进行？

标签： javascript html css reactjs

【解决方案1】：

你可以像下面这样使用：

你可以添加 css 类 size10 和 size0 类。

<button className={props.github ? 'size10' : 'size0'}>Github Code</button>

【讨论】：