不应用于React中的组件的样式

Question

我想用盒子里的道具来塑造我的形象。我不知道这个物体是不是空的。

const FaceRecognition = ({ imageUrl, box }) => {
  return (enter image description here
    <div>
      <img id='fa[enter image description here][1]ce' src={imageUrl} width={"500px"} height={"auto"} />
      <div
        className='bounding-box'
        style={{
          top: box.topRow,
          right: box.rightCol,
          bottom: box.bottomCol,
          left: box.leftCol,
        }}
      ></div>
    </div>
  );
};

 displayFaceBox = (box) => {
    this.setState({ box: box });
   
  };

这是我的App类中的代码，我想在其中呈现所有内容。

calculateFaceLocation = (data) => {
    const clarifaiFace =
      
    const image = document.getElementById("face");
    const width = Number(image.width);
    const height = Number(image.height);
   
    return {
      leftCol: clarifaiFace.left_col * width,
      topRow: clarifaiFace.top_row * height,
      rightCol: width - (clarifaiFace.right - width),
      bottomCol: height - (clarifaiFace.right - height),
    };
  };
  displayFaceBox = (box) => {
    this.setState({ box: box });
    console.log(this.state.box);
  };

Answer 1

当将对象作为对象传递给函数组件时，必须使用JSON.stringify序列化它，如下所示：

displayFaceBox = (box) => {
    this.setState({ box: JSON.stringify(box) });
    console.log(this.state.box);
};

然后在函数组件中解析它，如下所示。

const FaceRecognition = ({ imageUrl, box }) => {
     box = JSON.parse(box)
    ...

希望这能有所帮助。