在反应中解构儿童道具答案

【问题标题】：destructuring children Prop in react在反应中解构儿童道具
【发布时间】：2021-07-24 18:29:22
【问题描述】：

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

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

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} 正在按钮上显示普通文本

为什么会这样？？

【问题讨论】：

标签： html reactjs jsx

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

原因是 Square 组件中的children 是 React 创建的 Javascript 对象。您的控制台不知道如何比显示属性的文本表示更好地显示此内容（如图所示）。

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

【讨论】：