Question

我有两个组件一个是板组件另一个是方形组件

当我将道具从盒子传递到方块时，发生了一些奇怪的事情

Board 组件的代码是

 import React from "react";
import Square from "./Square";

const Board = () => {
  return (
    <div className="board">
      <div className="board-row">
        <Square value={1}>
          <p>hello</p>
        </Square>
        <Square value={2} />
        <Square value={3} />
      </div>
      <div className="board-row">
        <Square value={4} />
        <Square value={5} />
        <Square value={6} />
      </div>
      <div className="board-row">
        <Square value={7} />
        <Square value={8} />
        <Square value={9} />
      </div>
    </div>
  );
};

export default Board;

Square 组件的代码是

import React from "react";

function Square({ value, children }) {
  // the curly braces are just destructring
  //the values from props passed

  console.log(children);

  return (
    <button type="button" className="square">
      {children}
    </button>
  );
}

export default Square;

问题是 console.log(children) 在我的控制台上打印一个对象，而 {console} 在按钮上显示正常文本

为什么会这样？？

Answer 1

关于 JSX 需要记住的是，它比 HTML 更接近 JavaScript，尽管看起来更像后者。 React Docs 包含一个部分，该部分展示了简单标记如何等效于 React.createElement 调用，后者生成描述如何呈现 HTML 的对象。

props.children 是一个对象，它描述了在组件树上发生的 createElement 调用。这允许它在最终传递给渲染器之前传递给其他实用程序，如 React.Children 或 React.cloneElement。您在控制台中看到的和在浏览器中看到的都是其最终渲染前后的状态。

Answer 2

我假设您的意思是 console.log(children) 产生类似于 this 的东西。而且您不确定为什么返回值中的 {children} 会在您的浏览器窗口中生成“正常”文本。

这是因为 Square 组件中的 children 是 React 创建的 Javascript 对象。您的控制台不知道如何比显示属性的文本表示更好地显示它（如您在图像中看到的）。

但是当您在组件函数中返回 {children} 时，它会在呈现到浏览器窗口时由 React 处理。实际上，React 确实知道如何“正确”显示它，因此按钮与预期的文本一样。

在反应中解构儿童道具

2 个答案: