我有一个简单的组件示例:
function App() {
const observed = useRef(null);
console.log(observed.current);
return (
<div ref={observed} className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我希望observed.current
的类型为element,而current不会为空,而是具有所有属性的div元素。我的理解是:
但事实证明,.current
仍然为空。这很不好,因为我想将观察值传递给需要一个Element类型参数的函数。
答案 0 :(得分:3)
Ref.current
为null,因为直到函数返回并呈现内容后才设置ref。每当传递给它的数组内容的值更改时,useEffect钩子就会触发。通过在数组中传递observed
并通过将observed
记录到控制台的回调,可以利用useEffect挂钩完成任务。
useEffect(() => {
console.log(observed.current);
}, [observed]);
答案 1 :(得分:2)
这是我最后要做的,因为在useEffect
上调用rlvRef
并没有捕获所有事件。
const rlvRef = useRef()
const [refVisible, setRefVisible] = useState(false)
useEffect(() => {
if (!refVisible) {
return
}
// detected rendering
}, refVisible)
return (
<RecyclerListView
ref={el => { rlvRef.current = el; setRefVisible(!!el); }}
... />
)
答案 2 :(得分:0)
在function getRandomString() {
return Math.random()
.toString(36)
.substring(7);
}
var config = {
events: [{
url: "foo"
},
{
url: "baz"
}
]
};
function otherFunction(element) {
console.info(element.url);
}
for (let i = 0; i < 5; i++) {
var str = "&randomParam=" + getRandomString();
config.events.forEach(element => {
otherFunction(Object.assign({}, element, {
url: element.url + str
}));
});
}
发生时,console.log
尚未设置。尝试将ref
放入console.log
钩子中,它会按您的意愿工作。
useEffect