React / 为什么 props 不在父标签中？

Question

你好

我试图理解 React 如何将 props 信息从父级传递给子级。

在此示例中，App 函数返回：

 return (
    <div className="app">
      <Grid>
        <Palettes palettes={palettes} />
      </Grid>
    </div>
  );
};

并且在Grid函数中，它传递了props属性。

const Grid = (props) => {
  return <div className="grid" {...props} />;
};

但我不明白为什么应用程序不向网格选项卡提供

palettes={palettes}

，因为它是父级，例如：

return (
    <div className="app">
      <Grid palettes={palettes} >
        <Palettes />
      </Grid>
    </div>
  );
};

这当然行不通...

Answer 1

这里我们将 Palettes 组件作为子组件传递。 这意味着 Grid 组件是父组件。

在

<Grid>{ /* data */ }</Grid>

组件之间传递的任何数据都会作为 prop 发送到子组件。我们可以通过在网格组件中执行

console.log(props)

来查看这一点。

因此可以在网格组件中访问道具。

Answer 2

<Grid>

没有 props，子级被翻译为

children

prop，因此不能期望 Grid props 包含

palette

。

{...props}

导致网格渲染为：

<div className="grid">
  <Palettes palettes={palettes} />
</div>

Answer 3

不起作用的示例是将

props.palettes

设置为

Grid

组件，该组件对此不执行任何操作，但

palettes

预计在确切的

Palettes

组件中。并且它们不会在您不工作的示例中传递。

Grid

组件可以用多种方式表示，它们都是等价的，也许这会帮助你更好地理解正在发生的事情。

添加了

someOtherProp

用于示例目的

<div className="app">
  <Grid someOtherProp="123">
    <Palettes palettes={palettes} />
  </Grid>
</div>

以及 3 个等价的

Grid

组件：

const Grid = (props) => {
  return <div className="grid" {...props} />;
};

const Grid = ({ children, ...restProps }) => {
  console.log(children.type, children.props);
  // ƒ Palettes() {}, {palettes: Array(18)}

  console.log(restProps);
  // {someOtherProp: "123"}
  return <div className="grid" children={children} {...restProps} />;
};

const Grid = ({ children, ...restProps }) => {
  return (
    <div className="grid" {...restProps}>
      {children}
    </div>
  );
};

如您所见，

Grid

组件有自己的

props

，并且

children

组件也有自己的props。因此，如果您移动

<Grid palettes={palettes}>

，您只需将托盘移动到

Grid

，与

someOtherProp

相同，而

Grid

与它们无关。但

<Palettes>

现在会想念他们的。

Answer 4

据我所知，是调色板组件负责显示每个调色板。

网格组件只是以某种方式显示调色板

另外，我注意到 Grid 组件中的 props 在我看来是没有用的