将class分配给React中自定义组件的外部包装器

assign class to outer wrapper of a customized component in React

本文关键字：组件 外部 包装 自定义 class 分配 React      更新时间：2023-09-26

我们如何将类分配给React中组件的最外层包装器?

例如，我试图将类"表"添加到这个"FilterableProductTable"，以便最外面的包装器，"在这种情况下，可以有一个类分配给它?

我所做的是添加道具"className={"表"}"，但它似乎不工作。检查时，最外面的div仍然没有类。

ReactDOM.render(
  <FilterableProductTable className={'table'} products={PRODUCTS} />,
  document.getElementById("container")
);

最外面的div

外层包装器div仍然没有类

这是完全可能的。您必须记住，FilterableProductTable是一个组件，不像div那样表示DOM节点元素，因此您实际上只是将一个名为className的属性传递给您的组件。然后由组件决定是否使用传入的属性。

例如

class FilterableProductTable extends Component {
  render() {
    return (
      <div className={this.props.className}>
        ...
      </div>
    );
  }
}
ReactDOM.render(
  <FilterableProductTable className='table' products={PRODUCTS} />,
  document.getElementById("container")
);

如果你注意到上面，我实际上是通过FilterableProductTable中的this.props访问传入的属性className。所以你在渲染组件时设置的任何属性都将被传递到组件中，然后由组件自己的渲染逻辑决定如何使用这些属性。

您也可以将属性命名为foo或其他，例如:

class FilterableProductTable extends Component {
  render() {
    return (
      <div className={this.props.foo}>
        ...
      </div>
    );
  }
}
ReactDOM.render(
  <FilterableProductTable foo='table' products={PRODUCTS} />,
  document.getElementById("container")
);

看一下React文档，下面这些都是React原生支持的HTML元素:https://facebook.github.io/react/docs/tags-and-attributes.html html元素

如果你在这些项目上设置className道具，那么类将直接附加到它们上。:)

在FilterableProductTable组件的最外层div中，您需要包含className prop:

<div className={this.props.className}>
    {...children}
</div>
相关文章：