解构儿童 道具在反应中

Question

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

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

电路板组件的代码为

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;

方形组件的代码是

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;

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

为什么会这样？？

Answer 1

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

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

Answer 2

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

这样做的原因是 Square 组件中的children是由 React 创建的 Javascript 对象。您的控制台不知道如何显示它比显示属性的文本表示形式更好(如图所示)。

但是当你在组件函数中返回{children}时，它在呈现到浏览器窗口时由 React 处理。事实上，React 确实知道如何"正确"显示它，因此带有文本的按钮符合预期。