反应，从道具中添加css类[duplicate]

Question

我正在尝试向我的卡组件添加一个类，以便在插入时可以选择布局。但是这些道具不是在类名中解释的，我如何才能以这种方式添加css类？

组成部分

 function Card(props) {
        return (
          <div className="d-flex mx-auto {props.layout}" >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

在布局

<Card
 layout="my-green-bg"
 title="my title"
 text="my text"
/>

Answer 1

您可以尝试下面的代码。

function Card(props) {
    const classes = [ 'd-flex', 'mx-auto' ];
    if (props.layout) classes.push(props.layout);
        return (
          <div className={ classes.join(' ') } >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

另一种方式可以是

function Card(props) {
        return (
          <div className={ 'd-flex mx-auto ' + props.layout } >
            <div className="background my-auto">
              <div className="d-flex justify-content-center">
                <h3>{props.title}</span></h3>
              </div>
              <div className="d-flex h-100">
                <div className="w-100 my-auto">
                  <p>{props.text}</p>
                </div>
              </div>
            </div>
          </div>
        );
      }

Answer 2

请尝试以下操作：

<div className={`d-flex mx-auto ${props.layout}`}>

或不带模板文本：

<div className={'d-flex mx-auto ' + props.layout}>

我希望这有帮助！