Question

我是反应原生的新手。我有两个组件（屏幕A和屏幕B），如下所示。我需要在屏幕A内调用屏幕B的_showModalHistory方法。这是屏幕A（组件A）的代码：

 import B from './B.js';

    class A extends Component {
      render() {
            return (
                this.refs.B._showModalHistory();
                  );
              }
        }

在屏幕B（组件B）中，我还有以下代码：

      export default class B extends Component {

          constructor(props) {
                super();
                this.subscription = 0;
                this.state = {
                };
                changePage = props.cb;

                this.state = {
                  isModalVisible: false,
                  isModalVisibleHistory: false,
                };
            }

          _showModalHistory = () => this.setState({ isModalVisibleHistory: true });

          render() {
                return (
            <Modal isVisible={this.state.isModalVisibleHistory}>
            <View style={styles.contianer}>
            <History></History>
            </View>
            </Modal>
    );}
    }

我尝试在屏幕A中使用ref，以便达到屏幕B的方法但是，它显示了＆＃34;

的错误

无法读取正确性＆＃39; _showModalHistory＆＃39;未定的＆＃34;。

请问我的代码有什么问题吗？我应该添加任何东西来执行参考吗？

Answer 1

您需要先在B内呈现A组件。然后如下所示设置ref。

 class A extends Component {

      // Some on click listener.

      onClick() {
         this.B._showModalHistory();
      }


      render() {
            return (
                <B ref={component => { this.B = component; }} />
            );
      }
 }

在另一个组件

1 个答案: