Question

这里的新手，我正在研究react的{{3}}，在documentation中，我听不懂某些内容，如果我听不懂，我将不理解其余内容不明白。有人可以通过举例帮助我吗？

工具栏组件必须带有一个额外的“主题”道具
      并将其传递给ThemedButton。这会变得痛苦
      如果应用程序中的每个按钮都需要知道主题
      因为它必须通过所有组件传递。

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // The Toolbar component must take an extra "theme" prop
  // and pass it to the ThemedButton. This can become painful
  // if every single button in the app needs to know the theme
  // because it would have to be passed through all components.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

工具栏组件必须带有一个额外的“主题”道具

这可能像<Toolbar theme="dark">

并将其传递给ThemedButton

Toolbar组件如何将此道具传递给ThemedButton？并请澄清其余的评论。

谢谢您的帮助吗？你很友善

Answer 1

在您的Toolbar组件中，它接受一个参数props，props是调用它时传递给它的任何属性，例如<Toolbar param1="someString" param2={someVariable}>，在这种情况下是{{1 }}在工具栏中的值将是一个对象，其数据以key = value的形式传递，例如：props

如果您实际上不在工具栏中使用这些道具（属性）/参数，而是在子组件中使用，则必须将它们再次传递到另一个级别，例如{param1: "someString", param2: content_of_someVariable}中，然后最终使用ThemedButton本身将值传递给实际使用的组件，在您的情况下为<ThemedButton theme={props.theme} />。

因此，您必须跨多个组件传递主题，而不必使用或完全不关心主题，而只是将其传递到最终的Button组件。

（答案到此结束，以下是我以一种简单的方式解释上下文API的工作）

为避免该烦人的级别升到另一个级别，可以使用上下文API。因为每次要在链中的最后一个中使用3-4个级别/组件中的值时，都会很失禁。

考虑上下文，例如在根级别定义和导出的变量并保存一些数据（例如，用户登录状态或主题信息），并且每当需要该数据时，都将其导入并直接使用。您可以使用定义的上下文（MyContext.Provider）的Provider属性为其分配数据，并使用Consumer属性（MyContext.Consumer）来使用/访问在提供者中分配的数据。

上下文使用者的优点在于，只要在提供者中更新数据，使用者便会立即获取新数据并触发使用新数据的重新呈现。

我希望我能以简单明了的方式进行解释。写下任何问题或不清楚的部分的评论，我会尽力改善答案。

祝你好运！

Answer 2

道具是可帮助定义JSX在页面上显示方式的属性。

使用创建的组件时，可以将其传递如下的道具：

<MyComponent myProp={myPropValue} />

您也可以继续将props向下传递到组件层次结构中。假设您有一个如下所示的组件树：

MyComponent
--MySubComponent
----MySubSubComponent

您可以像这样将道具从MyComponent传递到MySubSubComponent：

<MyComponent myProps={MyProps} />

<MySubComponent mySubProps={props.myProps} /> //Props are the value you gave in the parent component

<MySubSubComponent mySubSubProps={props.mySubProps} />

在JSX中声明组件时给道具提供的标题是您将调用以获取道具价值的标题，例如props.myProps

组件如何将道具传递给另一个组件？

2 个答案: