反应功能组件，如何从元素 dragStart/dragEnd 回调访问外部函数变量

Question

我在 React 功能组件中遇到以下代码的问题

在 dragStart 和 dragEnd 中，我无法访问组件级别的 color。

const Card = (props) => {
  let color = props.color;

  function click() {
      // below line is perfect
      console.log(color); // red/green/blue
  }
  function dragStart(ev) {
    // Below lines gives error; //color is not defined
    console.log(color);
  };
  
  function dragEnd(ev) {
    // Below lines gives error; //color is not defined
    console.log(color);
  };

  return <div className="card">
      <div 
        draggable={true}
        onDragStart={dragStart}
        onDragEnd={dragEnd}
      >
        card
      </div>
      <div
        className="card-body"
        onClick={click}
      >
      Card body
      </div>
    </div>;
}

export default Card;

我做错了什么。我是新来的反应钩子。提前致谢

Answer 1

我看了一下 https://codesandbox.io/s/fragrant-surf-v873v?file=/src/components/Card.js，到目前为止我看到的错误是你在 flop 容器中缺少 reducer prop:

     <div className="flop">
        {flopped.map((card) => (
          <div
            className="cardContainer"
            key={JSON.stringify({ suit: card.suit, number: card.number })}
          >
            <Card
              key={JSON.stringify({ suit: card.suit, number: card.number })}
              suit={card.suit}
              number={card.number}
              stack={true}
              turned={card.turned}
              locked={card.locked}
              last={card.last}
              reducer={context.dispatchStock} // <== add this
            />
          </div>
        ))}
      </div>

见https://codesandbox.io/s/great-wescoff-hy83s

如果有任何其他问题，请告诉我

编辑我还发现您在功能组件中使用 this.setState 。改为这样做：

    ...
    const [localState, setLocalState] = useState({
        rotation: props.turned ? 0 : -180
    });
    ...

    ...
    const slideBackAnimation = (time) => {
        let rotation = null;
        if (lastTime !== null) {
            const delta = (time - lastTime) * 0.4;
            rotation = Math.min(0, localState.rotation + delta);
            setLocalState({ rotation });
        }
        lastTime = time;
        if (rotation !== 0) requestAnimationFrame(slideBackAnimation);
    };
    ...

反应功能组件，如何从元素 dragStart/dragEnd 回调访问外部函数变量

React functional component, how to access outer function variable from element dragStart/dragEnd callback

javascript

react-functional-component