Question

我需要将一个className添加到从父级传递的组件中，另一个className与其父级没有任何关系，但是与组件本身有关。

示例

SELECT
   first_table.*,
   sorting
FROM
   first_table
LEFT JOIN
   (
      SELECT
         id,
         RAND() AS sorting
      FROM
         first_table
      WHERE
         is_premium = 1
   ) p
      ON p.id = first_table.id
INNER JOIN
   (
      SELECT
         first_table.id,
      FROM
         first_table
      WHERE
         CURDATE() BETWEEN published_date AND DATE_ADD(published_date,INTERVAL valid_days DAY)
   ) a
      ON inserate.id=a.id 
ORDER BY
   is_premium DESC,
   sorting DESC,
   published_date DESC,
   update_date DESC

当我尝试这个时，两个类都没有应用，我可以做其中一个或不同时做两个。我如何实现这一目标？

Answer 1

<div className={`${this.state.className} ${this.props.content.divClassName}`}>

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

<div className={[this.state.className, this.props.content.divClassName].join(" ")}>

Answer 2

<div className={this.state.className && this.props.content.divClassName></div>

Answer 3

字符串和道具类的组合在这里

className={`${props.myClass} MyStringClass`}

Answer 4

<div className={(classes.shiny, classes.round)}>
    i'm shiny and round.
</div>

这可用于React + Material-UI makeStyles。

Answer 5

我像这样使用 classnames：

# terminal - install
$ yarn add classnames

// React component
import classnames from 'classnames';

<Component classNames={classnames(class1, class2)} />

如何添加多个className来响应组件？

5 个答案: