javascript - 我如何在反应中使用 2 个组件，一个到另一个？

Question

我需要使用两个组件，其中一个位于另一个下方，并且我需要与这两个组件进行交互。更具体地说，我需要使用 react-particles-js 模块，但我无法与之交互。我已经尝试使用 css z-index 属性，但它不起作用。

import Particles from 'react-particles-js'
import Screens from './screens'
...
class App extends Component {
  render() {
    return (
      <div>
        <Screens /> //this component has all screens of my application, and i use zIndex:'1' into Inputs, TextFields, Buttons and others components of Semantic UI...
        <Particles
          params={params}
          style={{ position: 'absolute', top: '0', zIndex: '0' }}
        />
      </div>
    )


  }
}

class ScreensLogin extends Component {
  ...
  <Form.Group>
  <Form.Input
    style={{ marginBottom: '28px', zIndex: '1' }}
    onChange={this.handleChange("email")}
    autoComplete="on"
    type='text'
    name='email'
    placeholder='Email'
    icon='mail'
    iconPosition='left'
    width={16}
    id='fieldEmail'
  />
</Form.Group>  

我必须对此代码做什么才能正常工作？

标签： javascriptreactjssemantic-ui-react