Question

如果在变量中给出此组件，如何调用React组件的功能？我有一个Parent将Test类传递到Child组件，这个孩子想要更改Test中的内容。

export class Parent extends React.Component {
    render() {
        let test = (<Test />);
        return (<Child tester={test} />);
    }
}

export class Child extends React.Component {
    render() {
        this.props.tester.setText("qwerty"); // how to invoke setText, setState or something like that?
        return ({this.props.tester});
    }
}

export class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            text: this.props.text || ""
        };
    }

    setText(text) {
        this.setState({ text: text });
    }

    render() {
        return (<div>{this.state.text}</div>);
    }
}

Answer 1

我认为你应该考虑反应成分的生命周期请尝试下面的代码（我刚刚添加了日志记录），并仔细观察日志。

export class Parent extends React.Component {
    render() {
        let test = (<Test />);
        return (<Child tester={test} />);
    }
}

export class Child extends React.Component {
    render() {
        console.log("Child render"); // <= logging added!
        // this.props.tester.setText("qwerty"); 
        // What kind of object is 'this.props.tester(= <Test />)' here???
        return ({this.props.tester});
    }
}

export class Test extends React.Component {
    constructor(props) {
        super(props);
        console.log("Test constructor"); // <= logging added!
        this.state = {
            text: this.props.text || ""
        };
    }

    setText(text) {
        // this.setState({ text: text });
        // this is another problem. We cannot call setState before mounted.   
        this.state.text= text;  
    }

    render() {
        return (<div>{this.state.text}</div>);
    }
}

如果是这样，你会看到两个重要的事实。

＆＃39;测试＆＃39;当你调用＆＃39; setText＆＃39;。时，组件尚未实例化我们如何调用未实例化的对象方法？不能！
这意味着＆＃39; this.props.tester＆＃39;不是＆＃39;测试＆＃39;的一个实例。零件。

但是如果你真的想要执行代码，请像这样修改Child.render。

render() {
    var test = new Test({props:{}});
    // or even this can work, but I don't know this is right thing
    // var test = new this.props.tester.type({props:{}});
    test.setText("qwerty");
    return test.render();
}

但我不认为这是一个好方法。

从另一个角度来看，人们可能想出一个像

render() {
    // Here, this.props.tester == <Test />
    this.props.tester.props.text = "qwerty";
    return (this.props.tester);
}

但当然不可能，因为＆＃39; this.props.tester＆＃39;是Child的只读属性。

从声明为变量的React组件调用函数

1 个答案: