javascript - 将类分配给 React 中自定义组件的外包装

Question

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

例如，我试图将类“table”添加到这个“FilterableProductTable”，以便最外层的包装器“”在这种情况下可以分配一个类？

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

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

the outmost div

the outer wrapper div still doesn't have a class

Answer 1

这是完全可能的。你必须记住 FilterableProductTable是一个 Component 并且不代表 DOM 节点元素，例如 div , 所以你实际上只是传递了一个名为 className 的属性到您的组件。然后由您的组件使用传入的属性。

例如

class FilterableProductTable extends Component {
  render() {
    return (
      <div className={this.props.className}>
        ...
      </div>
    );
  }
}

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

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

您可以调用属性 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-elements

如果您设置 className支持这些元素，然后类(class)将直接附加到他们身上。 :)