如果按钮是可重用的 React 组件，如何仅在一个选项中禁用 React 中的按钮？

Question

仍在尽我所能学习 React，如果这段代码不是最合乎逻辑的，请见谅。

我在 React 中制作了一个可重用的 CustomButton 组件，以便在我的应用程序中使用。然后，我在 Welcome 页面上创建了 3 个 Card 组件，每个 Card 都在其中嵌套了这个 CustomButton，每个 CustomButton 使用来自 react-router 的链接导航到应用程序的不同页面。对于第三张卡，我希望禁用此按钮，因为此特定页面将“即将推出”。我已经能够在最后一张卡片的道具中将 className 添加到 Link 以将文本的不透明度设置为看起来不活动，但希望能够自定义整个按钮（不仅仅是其中的文本）以使其看起来变灰出等。

有没有简单的方法来做到这一点？

这是我目前的代码：

卡片：

import React, { useState } from 'react';
import { Card } from 'react-bootstrap';
import CustomButton from './CustomButton';

const WelcomeCard = (props) => {

  return (
    <>
      <Card className='m-3 p-2 welcome-card rounded'>
        <Card.Body className='welcome-card__body'>
          <Card.Text>{props.text}</Card.Text>
          <CustomButton link={props.link} />
        </Card.Body>
      </Card>
    </>
  );
};

export default WelcomeCard;

自定义按钮：

import React from 'react';

const CustomButton = (props) => {
  return <button className='custom-button'>{props.link}</button>;
};

export default CustomButton;

WelcomeScreen - 底部的最后一个组件是我要禁用此自定义按钮的位置：

import React, { useState } from 'react';
import { Row, Col } from 'react-bootstrap';
import WelcomeCard from '../components/WelcomeCard';
import Loader from '../components/Loader';
import { Link } from 'react-router-dom';

const WelcomeScreen = () => {
  const [loading, setLoading] = useState(false);

  return (
    
        <>
          <div class='welcome-container'>
            <div>
              <h1 className='p-2 my-3 welcome-header'>Welcome</h1>
            </div>

            <div className='cards-container'>
              <Row>
                <Col>
                  <WelcomeCard
                    link={
                      <Link className='cards-link' to='/company'>
                        Company
                      </Link>
                    }
                  />
                </Col>
                <Col>
                  <WelcomeCard
                    link={
                      <Link className='cards-link' to='/landscape'>
                        Landscape
                      </Link>
                    }
                  />
                </Col>
                <Col>
                  <WelcomeCard
                    link={
                      <Link className='cards-link disabled-link' to='/insights'>
                        AI Insights
                      </Link>
                    }
                  />
                </Col>
              </Row>
            </div>
          </div>
    </>
  );
};

export default WelcomeScreen;

提前感谢您的指导！

Answer 1

为什么不使用道具来解决这个问题？ 像这样编辑您的自定义按钮：

import React from 'react';

const CustomButton = (props) => {
  if(!props.active) return <button className='custom-button-disabled'></button>;
  return <button className='custom-button'>{props.link}</button>;
};

export default CustomButton;

您现在可以像使用链接道具一样将此道具传递给自定义按钮组件。