據我了解，refs 不是在 React 生命周期（source）之外定義的。我試圖解決的問題是捕獲文檔級別的按鍵（即，無論聚焦哪個元素都觸發事件），然后與反應引用交互。下面是我正在嘗試做的事情的簡化示例：export default class Console extends React.Component {??? ? constructor(props) {? ? ? ? super(props);? ? ? ? this.state = {? ? ? ? ? ? visible: false,? ? ? ? ? ? text: "",? ? ? ? };? ? }? ? print(output: string) {? ? ? ? this.setState({? ? ? ? ? ? text: this.state.text + output + "\n"? ? ? ? })? ? }? ? toggleVisible()? ? {? ? ? ? this.setState({visible: !this.state.visible});? ? }? ? render() {? ? ? ? const footer_style = {? ? ? ? ? ? display: this.state.visible ? "inline" : "none",? ? ? ? };? ? ? ? return (? ? ? ? ? ? <footer id="console-footer" className="footer container-fluid fixed-bottom" style={footer_style}>? ? ? ? ? ? ? ? <div className="row">? ? ? ? ? ? ? ? ? ? <textarea id="console" className="form-control" rows={5} readOnly={true}>{this.state.text}</textarea>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? </footer>? ? ? ? );? ? }}class App extends React.Component {? private console: Console;? constructor() {? ? super({});? ??? ? this.console = React.createRef();? }? keyDown = (e) =>? {? ? ? this.console.current.toggleVisible(); // <-- this is undefined? }? componentDidMount(){? ? ? document.addEventListener("keydown", this.keyDown);? },? componentWillUnmount() {? ? ? document.removeEventListener("keydown", this.keyDown);? },? render() {? ? return (? ? ? <div className="App" onKeyDown={this.keyDown}> // <-- this only works when this element is in focus? ? ? ? // other that has access to this.console that will call console.print(...)? ? ? ? <Console ref={this.console} />? ? ? </div>? ? );? }}我的問題是：有沒有辦法在 React 的生命周期內進行此類文檔級按鍵，以便 ref 不在undefined事件處理程序內keyDown？我見過很多涉及設置tabIndex和黑客攻擊以確保正確的元素在正確的時間獲得焦點的解決方案，但這些對我來說似乎并不是可靠的解決方案。我剛剛學習 React，所以這可能是 React 的設計限制，或者我沒有正確設計我的組件。但這種功能對我來說似乎相當基本，能夠將組件從一個組件傳遞到另一個組件并相互調用方法。