Question

我尝试从子组件中调用父对象的ref方法。我可以如下解释我的问题：

class Parent {
   constructor(props) {
        super(props);

        this.refOfChild= React.createRef();
   }

    render() {

        return (
            <React.Fragment>
                <AnotherChild refOfChildWithRef = {this.refOfChild }/>
                <ChildWithRef ref={ this.refOfChild}  />

            </React.Fragment>
        )
    }
}

我想从AnotherChild调用某些方法

class AnotherChild {
     onClickSomeButton(){
           this.props.refOfChildWithRef.current.someMethod();
    }

}

通常，我可以成功地从someMethod调用此Parent，但不能从AnotherChild调用它。

希望我能解释我的问题。

预先感谢您的回答。

Answer 1

我相信您应该探索引用转发的概念。链接如下：

https://reactjs.org/docs/forwarding-refs.html

引用转发是一项可选功能，它使某些组件可以接收所接收的引用，并将其进一步向下传递（即“转发”）给孩子。

我相信这是您唯一要寻找的东西。

Answer 2

我不相信您可以构造事物以使用refs从另一个组件获取方法，尽管我从未见过或以这种方式完成过，但我很乐意在此处进行测试（请参见下面的方法2）< / strong>。

通常，您将具有位于顶层的可访问功能，然后将其传递给每个组件。

<App> const appFunction = () => {... <Child1 appFunction={appFunction} /> <Child2 appFunction={appFunction} /> </App>

点击“运行代码段” 下面的按钮，以查看代码的工作方式。

也就是说，如果您希望转发裁判，则可以使用以下内容：

https://reactjs.org/docs/forwarding-refs.html

方法1：作为道具传递功能

// main.js const ChildOne = props => { const onClickButton = () => { props.parentFunction('child one'); } return <div><button onClick={onClickButton}>Click Me - From Child One</button></div> }; const ChildTwo = props => { const onClickButton = () => { props.parentFunction('child two'); } return <div><button onClick={onClickButton}>Click Me - From Child Two</button></div> } const App = () => { const parentFunction = (text) => { console.log('PARENT FUNCTION Run From: ', text); } return <div> <h1>Parent</h1> <ChildOne parentFunction={parentFunction} /> <ChildTwo parentFunction={parentFunction} /> </div> } ReactDOM.render(<App />, document.querySelector('#root'));

<body> <div id="root"></div> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script type="text/babel" src="main.js"></script> </body>

方法2：尝试使用参考

我认为之所以这样做（并且我仍然需要对此进行调查）是因为不建议这样做，因为这可能会导致性能问题。我注意到当我这样做时，它将把整个组件加载到另一个组件中，这在查看状态变化时有点周期性。

const { createRef } = React; class ChildOne extends React.Component { myFunction() { console.log('hello from Child 1'); } render () { return (<div>Child One</div>); } } class ChildTwo extends React.Component { constructor(props) { super(props); this.refOfChild = React.createRef(); this.clickMe = this.clickMe.bind(this); } clickMe() { this.props.forwardRef.current.myFunction(); } render () { return (<div>Child Two<br /><button onClick={this.clickMe}>Child 2 Button</button></div>); } } class App extends React.Component { constructor(props) { super(props); this.refOfChild = React.createRef(); } render () { return (<div><h1>Parent</h1><br /><ChildOne ref={this.refOfChild} /><br /><ChildTwo forwardRef={this.refOfChild} /></div>) } }; ReactDOM.render(<App />, document.querySelector('#root'));

<body> <div id="root"></div> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script type="text/babel" src="main.js"></script> </body>

React-从另一个孩子访问父母的孩子ref

2 个答案: