Question

我有以下div：

//other imports
import { FetchProjectComponent } from './fetch-project/fetch-project.component';

@NgModule({
declarations: [
  AppComponent,
  NavMenuComponent,
  HomeComponent,
  CounterComponent,
  FetchDataComponent,
  FetchProjectComponent
],
imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
      { path: 'fetch-project', component: FetchProjectComponent },
    ])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

当我检查元素时，结果是：

<div className='box-default expand' style={{zIndex: props.zindex}}>

它不起作用。不应该是：

<div zindex="0">...</div>

？

这是父容器：

<div style="z-index: 0">...</div>

Answer 1

沿组件链传递道具：

但是您的父组件应该返回，而不返回div

select count(distinct O1.customer_id) as New_Customers 
from Orders O1
Where not exist 
  (select 1 
  from Orders O2 
  Where O2.date < date '2018-01-01'
  and O1.customer_id = O2.customer_id)
and extract(YEAR from date) = '2018'

和ChildComponent函数应包含：

const ParentComponent = () => {
  ...more code

  return (
    <ChildComponent zindex={zIndex[0]} />
  )
}

Answer 2

您可以尝试一下。

const ParentComponent = ({ message }) => {
  const ChildComponent = zindex={zIndex[0]}

  const ChildComponent = (props) => (
  <div className='box-default expand' style={{zIndex: props.zindex}} > 
   {message}</div>
   )
  }

ReactJS：如何将道具传递给样式？

2 个答案: