在 React.js 中的容器中为组件设置 class

Question

是否可以通过容器在组件上设置 class？

我想做这样的事情：

<LinkButton className="text--left">Button</LinkButton>

但是 class text--left 被 React 删除并且永远不会出现在 DOM 中。有没有比用 div.text--left 包装组件更好的解决方案？

谢谢。

Answer 1

LinkButton是你制作的组件吗？

如果是这样，那么就像对待任何其他道具一样对待 className。

例如，您的 LinkButton 组件可能看起来像

LinkButton = React.createClass({
  render: function() {
    return <button className={this.props.className}>Whatever</button>
  }
});

然后 <LinkButton className="text--left">Button</LinkButton> 将使用您传入的 class 进行渲染。

Set a class on a component from its container in React.js