是否可以将 html 元素宽度传递给无状态子组件？答案

【问题标题】：Is it possible to pass html element width to stateless child component?是否可以将 html 元素宽度传递给无状态子组件？
【发布时间】：2016-09-08 13:26:23
【问题描述】：

我有一个无状态容器组件和一个无状态子表组件。表格需要知道父组件外部div的宽度，才能用作maxWidth。我无法将此值传递给孩子。

首先，我让父级将回调方法作为引用传递给其最外层的渲染 div，以将引用作为变量存储在父级上（引用在 div 上；我知道无状态组件不能有引用），但是如果我然后尝试将 ReactDOM.findDOMNode(parentVarContainingRefToDiv).offsetWidth 传递给孩子，它抱怨孩子的渲染必须是纯的并且不包含陈旧的参考。如果我从父级传递一个将宽度返回给子级的方法，也会发生同样的事情。

我试图使父级有状态并将宽度保存为要传递的状态，但我找不到一个好的生命周期来执行此操作（如果状态发生更改，WillUpdate 将无休止地呈现）。我考虑过将 WillUpdate 和 ShouldUpdate 组合起来，但如果它真的可行的话，听起来很恶心。

我考虑的另一件事是向子节点发送一个方法，通过该方法它向父节点发送另一种方法，用于在子节点上存储宽度值。听起来也很恶心。

从我站的角度来看，唯一听起来合理的事情是让孩子有状态并在 WillReceiveProps 中做一些棘手的事情。

这是唯一的方法吗？如果可能的话，我想保持两个组件无状态。

对不起，没有代码，我循环了几个不同的版本来想出上面的场景，但是如果无法忍受无代码问题，我可以尝试重新创建它们。

【问题讨论】：

标签： reactjs

【解决方案1】：

在 Reactjs 中，如果你需要使用 findDOMNode，你就是不尊重 React 的原理和结构。你不应该使用它。尝试在线寻找组件。 Like this one ;)

从 DOM 中获取组件会破坏 React 项目的客观层次结构。

【讨论】：

这并不完全正确。几乎在所有情况下都应该避免它，这就是为什么人们到处夸大它为“从不使用”的原因，但是有些事情没有它就无法完成，即当需要实际的 DOM 属性和方法时。你怎么会 focus() 在输入上？您必须检索 DOM 对象才能调用这样的原生 DOM 方法。但感谢您的组件建议。我查看了代码，他正在使用调整大小事件来吸收 DOM 宽度信息，而不是使用 findDOMNode。我更喜欢这个主意。