Question

我刚刚开始学习反应。我想编写一个函数，以便可以像WHERE (PriceIncrease.BusinessUnit IS NULL AND PriceIncrease.PriceIncreaseNameId IS NULL) OR (PriceIncrease.BusinessUnit = 'Mill' AND PriceIncrease.PriceIncreaseNameId = 4)这样使用JSX。

到目前为止，我已经完成了<element {classes("btn btn-large red-text etc")}>，这是我正在尝试完成任务的两个文件。请帮助我，如果这在React中做事真的很糟糕，请原谅我。这正是我的兴趣带给我的。谢谢。

/app/src/App.js

yarn add classnames

/app/src/components/classnames.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>
    );
  }
}

Answer 1

您可以使用“ spread”运算符将其扩展为道具；

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

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

1 个答案: