无效的挂钩调用挂钩只能在函数组件的主体内调用

Question

我目前正在使用Modalize库实现一个模型。我对请求使用了Hooks，但只要我要调用Modalize组件，它就会返回以下错误。我花了很多时间，还没弄清楚问题出在哪里

​

​

import React, { useRef } from 'react';
import { Modalize } from 'react-native-modalize';

export default class MyScreen extends React.Component {

    render() {

        const modalizeRef = useRef(null);

        function onOpen() {
            modalizeRef.current?.open();
        }

        return (
            <View>
               <TouchableOpacity onPress={onOpen}>        
                     <Text>click me</Text>
               </TouchableOpacity>

                <Modalize
                    ref={modalizeRef}
                    snapPoint={180}
                    >
                    <View
                        style={{
                            flex: 1,
                            height: 100,
                            flexDirection: 'row',
                        }}>
                        <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                            Button 01
                        </TouchableOpacity>

                        <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                            Button 02
                        </TouchableOpacity>

                    </View>
                </Modalize>
            </View>
        );
    }
}

Answer 1

你应该只在功能组件中使用钩子。阅读文档here

export default function MyScreen() {
  const modalizeRef = useRef(null);

  function onOpen() {
      modalizeRef.current?.open();
  }

  return (
      <View>
          <TouchableOpacity onPress={onOpen}>        
                <Text>click me</Text>
          </TouchableOpacity>

          <Modalize
              ref={modalizeRef}
              snapPoint={180}
              >
              <View
                  style={{
                      flex: 1,
                      height: 100,
                      flexDirection: 'row',
                  }}>
                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                      Button 01
                  </TouchableOpacity>

                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                      Button 02
                  </TouchableOpacity>

              </View>
          </Modalize>
      </View>
  );

}

Answer 2

据我所知你想要一个裁判。有两种方法

1. 使用createRef在构造函数中声明它(不需要导入)

构造函数(Props){ this.modalizeRef = React.createRef()；}

1. 在组件调用中指定它

<模块化ref={(ref) => { this.modalizeRef = ref；}} />

Answer 3

我设法通过使用refs callback解决了这个问题

  export default class MyScreen extends React.Component {
    constructor(props) {
        super(props);
        this.modalizeRef = React.createRef();
    }

    onOpen() {
        this.modalizeRef.current?.open();
    }

}


<View>
          <TouchableOpacity onPress={this.onOpen.bind(this)}>        
                <Text>click me</Text>
          </TouchableOpacity>

          <Modalize
              ref={this.modalizeRef}
              snapPoint={180}
              >
              <View
                  style={{
                      flex: 1,
                      height: 100,
                      flexDirection: 'row',
                  }}>
                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#29ae19' }]}>
                      Button 01
                  </TouchableOpacity>

                  <TouchableOpacity style={[style.btnTest, { backgroundColor: '#ff0000' }]}>
                      Button 02
                  </TouchableOpacity>

              </View>
          </Modalize>
      </View>