如何在不使用 React 中的 props 的情况下将函数传递到组件的层次结构中？

Question

说我有组件层次A，B，C。有没有办法在不使用道具的情况下调用来自C的函数？问题是：是否可以将中介B排除在过程中？

Answer 1

上下文是一个解决方案，但可能是一个坏主意，尤其是当您不熟悉反应时。

尝试使用...rest操作员ES6解决您的问题，如以下内容：

const A = ({ arg1, arg2 = 4, ...rest }) => (
  <B size={arg1 * arg2} {...rest} />
);

const B = ({size, size = {}, ...rest}) => (
  <C {...rest} style={style} />
);

这是一个原始的例子，想法是c获得了所有B的所有内容，但是B不会知道所有这些参数，而只会提供它们。这里B提供style，但不知道style是给他的。但是C知道他可以得到size，因此可以使用。

如果您不知道上下文的工作原理，那么这种替代方案要比使用上下文要好得多。您应该首先尝试使用此休息的东西而不是上下文。

上下文有时确实很有用，但是通常，您必须知道自己在做什么。

请注意，此解决方案需要ES6，因此您需要Babel或等效地传输代码。

Answer 2

您可以使用上下文来实现这一目标。根据React文档的说法，它允许：

将数据通过组件树传递而无需通过道具 在各个级别手动下降。

Answer 3

是的。将A AS Props的功能传递给B，然后将与Prop相同的道具传递给C。

this.props.someFunction();