Question

在我的项目中，我有一个包含以下JSX的组件

<div className={`${styles}`}>
  <div className="container">
    <div className="row">
      <div className="col-md-6 delivery-address">
        <h4>DELIVERY ADDRESS</h4>
        <UserAddress { ...this.props.address } className="address-card"/>
      </div>
     </div>
    <div className="ordrbtn"><Link to="/checkout/payment" className="nav-link"><button>CONTINUE</button></Link></div>
  </div>
</div>

我想将className的“delivery-address”移动到一个单独的组件，我更新的JSX正在关注

<div className={`${styles}`}>
  <div className="container">
    <div className="row">
      <div className="col-md-6">
        <div className="delivery-address">
          <h4>DELIVERY ADDRESS</h4>
          <UserAddress { ...this.props.address } className="address-card"/>
        </div>
      </div>

    </div>
    <div className="ordrbtn"><Link to="/checkout/payment" className="nav-link"><button>CONTINUE</button></Link></div>
  </div>
</div>

以下是渲染输出。

<div class="_31MAPZTc542WUNd0EWgW4J">
    <div class="container">
        <div class="row">
            <div class="col-md-6 delivery-address">
                <div class="_7yign4RAIpkiKQ5sKM4I_ address-card ">
                    <h4>DELIVERY ADDRESS</h4>
                    <div class="_7yign4RAIpkiKQ5sKM4I_ address-card">
                        <!--UserAddressComponent-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

delivery-address className替换为UserAddress组件className。

重新启动服务器后，一切按预期工作。问题是，每次组件更新时我都需要重启节点服务器。

操作系统：MacOS X v 10.13.2

节点：v8.7.0

感谢任何支持。

Answer 1

我认为你不能使用className来设置子类名。尝试将您的类作为未保存的关键字传递给道具，例如：

<UserAddress { ...this.props.address } customClassName="address-card"/>，然后在UserAddress：<element className={this.props.customClassName} />

响应组件更改其所有classNames都移动到其父级

1 个答案: