React.cloneElement -> 添加 className 元素

IT技术 javascript reactjs
2021-05-19 10:43:20

假设我有一个ReactElement具有 className 的类，并且我想向其 className 添加一个新类，而不覆盖现有的 className。我该怎么做？

我尝试了以下操作，但它确实覆盖了现有的 className：

var hello = <Hello name="World" className="base"/>;
hello = React.cloneElement(hello,{className: "text1"});
hello = React.cloneElement(hello,{className: "text2"});

但是，此解决方案有效：

var hello2 = <Hello name="World" className="base"/>;
hello2 = React.cloneElement(hello2,{className: hello2.props.className + " test1"});
hello2 = React.cloneElement(hello2,{className: hello2.props.className + " test2"});

但是这样使用安全ReactElement.props吗？它是否是 ReactElement 公共 API 的一部分，并且应该在未来保持追溯兼容？我无法在文档中找到它。

有没有另一种方法来实现这一目标？

2个回答

React 元素的结构是稳定的，请参阅Nodes 和 Elements，因此您的方法是完全安全的（并且推荐）。

如果您进行大量 className 操作，我建议使用classnamesmodule。

您之前的示例将变为：

var cx = require('classnames');

React.cloneElement(hello2, {
  className: cx(hello2.props.className, "test1"),
});

CloneElement 很慢，而且看起来有点矫枉过正。您可以使用 mixin 来执行此操作和 npm 类名包 ( https://www.npmjs.com/package/classnames )。沿着

var classNames = require('classnames');

一个用于添加类字符串或转换为对象（见下文）以移交给 classNames 的函数，如文档中所示

classNames('foo', 'bar'); // => 'foo bar'

classNames({ foo: true }, { bar: false }); // => 'foo'

其它你可能感兴趣的问题
上一篇React hook form v7 Function 组件不能被赋予引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 下一篇与 React-Bootstrap 对齐