React Js 中的聚光灯

Question

我使用 react js 创建了聚光灯。我无法单击它下面的对象。我尝试将 pointerEvents: 'none' 应用于样式，但这并没有引起人们的注意。我应该如何使下面的对象可点击？

这里是代码：-

import React from 'react';

export default class Spot extends React.Component {

  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0};
  }


   _onMouseMove(e) {
    this.setState({ x: e.screenX , y: e.screenY });
    }

  render() {
    const { x, y } = this.state;
    return (
       <div className={'spot'} onMouseMove={this._onMouseMove.bind(this)} 
          style={{background: `radial-gradient(${this.props.height}px 
              ${this.props.width}px at ${x}px ${y}px , transparent 90%, 
              ${this.props.color})`, top: '0', bottom: '0', left: '0', right: 
                  '0',  position:  'absolute'}}> 
       </div>
      );
    }
  }

这是另一个组件：-

import React from 'react'
import Scene from '../components/Scene'
import Sobject from '../components/Object'
import Room from '../images/level1/Room.png'
import Spot from './Spotlight.js'

export default class Level1 extends React.Component {
constructor(props) {
    super(props)
}

clickIt(){
 console.log('room')
 }

render() {
    return (
            <div>

            <Scene>
                <Sobject name={'room'} xPos={0} yPos={0}>
                    <img src={Room} height="725" width="1536" onClick= 
                      {this.clickIt.bind(this)} />
                </Sobject>
                <Spot height={200} width={200} color={'rgba(0,0,0,0.91)'} />

                </Scene>


            </div>
            )
    }
}

Answer 1

将 level1 组件重构如下： 请注意组件顺序的重要性，如果您将 Spot 放在 Sobject 之后，它将不起作用。 以下其他几点只是代码重构 使用箭头函数代替bind(this)。 为了在彼此内部渲染组件，而不是使用{this.props.children}，您可以只在父组件中导入组件并添加到那里，除非您有特定原因

// level1 component

import React from "react";
import Scene from "../components/Scene.js";
import Sobject from "../components/Object.js";
import Spot from "./Spotlight.js";

export default class Level1 extends React.Component {

  render() {
    return (
      <div>
        <Scene>
          <Spot height={200} width={200} color={"rgba(0,0,0,0.91)"} />
          <Sobject name={"room"} xPos={0} yPos={0}/>        
        </Scene>
      </div>
    );
  }
}

//聚光灯组件

import React from "react";

export default class Spot extends React.Component {  
state = { x: 0, y: 0 }; 

  _onMouseMove =(e) =>{
    this.setState({ x: e.screenX, y: e.screenY });
  }

  render() {
    const { x, y } = this.state;
    return (
      <div
        className={"spot"}
        onMouseMove={this._onMouseMove}
        style={{
          background: `radial-gradient(${this.props.height}px ${
            this.props.width
          }px at ${x}px ${y}px , transparent 90%, ${this.props.color})`,
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          position: "absolute"
        }}
      />
    );
  }
}

// 场景组件

import React from "react";

export default class Scene extends React.Component {

  renderObjects = () => this.props.children;  

  render() {
    return (
      <div
        className={"scene-container"}
        style={{ position: "absolute", height: "100vh", width: "100%" }}
      >
        {this.renderObjects()}
      </div>
    );
  }
}

//对象组件

import React from "react";

export default class Sobject extends React.Component {

  click =() =>{
    console.log("clicked");
  }
  render() { // below we use default values in case the prop is not there
    const { name = "", type = "generic", xPos =0, yPos =0, ismoving =false} = this.props;
    return (
      <div
        className={"object-container"}
        style={{ left: xPos, top: yPos, position: "absolute" }}
      >
        <h1 onClick={this.click}>Hello</h1>       
      </div>
    );
  }
}