Question

假设我有组件层次结构A，B，C。有没有办法在不使用道具的情况下从C调用A的函数？问题是：是否可以从流程中排除中间人B？

Answer 1

您可以使用Context来实现这一目标。根据反应文档，它允许：

通过组件树传递数据，而不必传递道具在每个级别手动下载。

Answer 2

上下文是一种解决方案，但可能是一个坏主意，特别是如果您是React的新手。

尝试使用ES6 ...rest运算符解决您的问题，如下所示：

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，因此可以使用它。

如果您不了解Context的工作原理，那么这个替代方案比使用Context要好得多。你应该首先尝试使用这个休息而不是上下文。

上下文有时非常有用，但一般来说，你必须知道自己在做什么。

请注意，此解决方案需要ES6，因此您需要使用Babel或同等版本来转换代码。

Answer 3

是的，这是可能的。将A的功能作为道具传递给B，然后将相同的道具作为道具传递给C.然后可以按如下方式调用该功能：

this.props.someFunction();

如何在组件的层次结构中传递函数而不在React中使用props？

3 个答案: