Question

我是菜鸟，目前正在学习reactjs，有人可以解释，如何访问位于component内的另一个component内的reactjs内的函数吗？ / p>

示例：

class ComponentOne extends React.Component{
    constructor(){
        super()
        this.handleClick=this.handleClick.bind(this)
    }

    handleClick(){
        console.log("handling click")
    }

    render(){
        return(
            <button onClick={this.handleClick}>Click me</button>
        )
    }
}

// This component is in another file

import ComponentOne from './ComponentOne'

class ComponentTwo extends React.Component{
    constructor(){
        super()
        this.handleComp=this.handleComp.bind(this)
    }

    handleComp(){
        ComponentOne.handleClick() 
    }

    render(){
        return(
            <button onClick={this.handleComp}>Click me</button>
        )

    }
}

像这样。

Answer 1

通常，当您使用react时，您希望在其他组件you use a ref内执行函数。

我有明确的用例，我有一个VideoPlayer组件，我想在播放器（组件外部）上执行播放或暂停功能，但我想要VideoPlayer＆＃39 ; s调用函数来更新其状态和其他所有内容。它可能非常强大！

class ParentComponent extends React.Component {
    handleClick = (e) => {
        e.preventDefault();
        this.childComponentRef && this.childComponentRef.someFunc();
    } 
    assignChildComponentRef = target => this.childComponentRef = target;
    render() {
        retrurn (<div>
            <button onClick={this.handleClick}>trigger child function click</button>
            <ChildComponent ref={this.assignChildComponentRef} prop1={this.something} />
        </div>);
    }
}

// child component implementation
class ChildComponent  extends React.Component {
    constructor(props){
        super(props);
        this.state = { value: 0 };
    }
    someFunc = () => {
        this.setState({ value: this.state.value + 1 });
    }
    render() {
        return <div>{this.state.value}</div>
    }
}

这里很少有人注意到这一点。

您将看到许多使用字符串引用的示例。 This is now considered a bad practice and will be removed in later versions.
我绝对只需要使用refs。但是，如果您需要对组件进行引用，那么ref就是实现此目的的方法。

访问组件内的函数？

1 个答案: