reactjs - 如何为元素类名编写快捷 JSX 函数？

Question

我刚开始学习反应。我想写一个函数，这样我就可以像<element {classes("btn btn-large red-text etc")}>.

到目前为止，我已经完成了yarn add classnames，这是我试图完成任务的两个文件。请帮助我，如果这是在 React 中做事的一种非常糟糕的方式，请原谅我。这正是我感兴趣的地方。谢谢你。

/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>
    );
  }
}

/app/src/components/classnames.js

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

标签： reactjs

Answer 1

您可以使用“扩展”运算符来实现这一点，它将对象扩展为道具；

/app/src/App.js

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>
    );
  }
} 

/app/src/classes.js

import classNames from 'classnames';

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