Reactjs 如何为元素className编写快捷JSX函数？

我刚开始学习反应。我想写一个函数，这样我就可以像

那样使用JSX了

到目前为止，我已经完成了添加类名的工作，下面是我试图完成任务的两个文件。请帮助我，如果这真的是一种糟糕的方式，请原谅我。这正是我感兴趣的地方。多谢各位

/app/src/app.js

import React, { Component } from 'react';
import './App.css';
import classes from 'components/classnames';

export default class App extends Component {
  render() {
    return (
      <div className="App">
         <p {classes("class-a class-b class-c")>Hello World</p>
      </div>
    );
  }
}

class ClassNames extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      `className="${classnames(props)}"`
    )
  }
}

import React, { Component } from 'react';
import './App.css';
import classes from './classes';

export default class App extends Component {
  render() {
    return (
      <div className="App">
         <p {...classes("class-a class-b class-c")}>Hello World</p>
      </div>
    );
  }
} 

import classNames from 'classnames';

export default function(...args) {
  return { className: classNames(...args) };
}

---

您可以使用“扩展”操作符实现这一点，它将对象扩展为道具

/app/src/app.js

import React, { Component } from 'react';
import './App.css';
import classes from 'components/classnames';

export default class App extends Component {
  render() {
    return (
      <div className="App">
         <p {classes("class-a class-b class-c")>Hello World</p>
      </div>
    );
  }
}

class ClassNames extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      `className="${classnames(props)}"`
    )
  }
}

import React, { Component } from 'react';
import './App.css';
import classes from './classes';

export default class App extends Component {
  render() {
    return (
      <div className="App">
         <p {...classes("class-a class-b class-c")}>Hello World</p>
      </div>
    );
  }
} 

import classNames from 'classnames';

export default function(...args) {
  return { className: classNames(...args) };
}

---

出于学习目的：当然，你可以这样做。对于真正的代码：只需以正常方式使用

类名

库。在这里没有太多的理由反对潮流。我发现了这个相关的问题：