Question

我想将“ className”从父组件传递给Reactjs中的子组件。

考虑此jsx代码段

   <div>
      <div class="overlay">
          <div class="openingContent" id="header1"></div>
            <h2 class="d-sm-block d-md-none opening-content-header-m">“It’s Very Easy To Be Different, But Very Difficult To Be Better.”</h2>
          <div class="row d-sm-block d-md-none btn-row-openingContent-m">
            <button type="button" class="btn btn-explore btn-common-m">Explore Services</button>
            <button type="button" class="btn btn-contact btn-common-m">Contact Us</button>
          </div>
          <h2 class="d-none d-md-block opening-content-header-d">“It’s Very Easy To Be Different, But Very Difficult To Be Better.”</h2>
          <div class="row d-none d-md-block btn-row-openingContent-d">
              <ButtonR className={"btn btn-explore btn-common-d"} content="Explore Services" />
              <ButtonR className={"btn btn-contact btn-common-d"} content="Contact Us" />

这里有两个部分，第一部分是我想要实现的目标

 <button type="button" class="btn btn-explore btn-common-m">Explore Services</button>
 <button type="button" class="btn btn-contact btn-common-m">Contact Us</button>

第二部分是我认为如果将className添加到组件中，它也会被添加到子组件中

<ButtonR className={"btn btn-explore btn-common-d"} content="Explore Services" />
<ButtonR className={"btn btn-contact btn-common-d"} content="Contact Us" />

但是由于某种原因，这种情况并非如此。 我的问题是：如何向子组件添加多个className（className不同）？

这是我的按钮组件

import React from 'react'

const ButtonR = (props) => {
    return (
        <button type="button" class="btn btn-ripple">{props.content}</button>
    )
}

export default ButtonR;

Answer 1

className只是DOM元素的特殊支持。本质上，您只是在创建一个普通的道具以传递到ButtonR组件中。

在ButtonR组件中，您可以执行类似的操作

return <button type="button" className={`btn btn-ripple ${props.className}`}>{props.content}</button>

或者如果您不能使用ES6模板字符串：

return <button type="button" className={'btn btn-ripple ' + props.className}>{props.content}</button>

顺便说一句，如果您想要更多功能并使JSX更加整洁，则可以使用classnames npm软件包。

如何将样式传递给子组件？

1 个答案: