Question

我需要将功能组件转换为基于类的组件。我对React还是很陌生，但是我尝试了转换组件。我收到错误-ReferenceError：无法找到变量：Props

我的问题是，如何在基于类的组件中添加道具以使转换正常工作？

基于类的组件是模态，具有从父组件触发的形式，这很好用。表单使用的状态变量在基于类的组件中不起作用，因此我需要将当前的功能组件转换为基于类的组件。我正在使用React的16.6.3版本，因为其他软件包无法在React-Native的较新版本中使用，因此我无法在该版本中使用钩子。

功能组件

const ShowModal = props => (
  <Modal
    visible={props.display}
    animationType="slide"
    onRequestClose={() => console.log("closed")}
  >
   ...Other stuff in here. 
 </Modal>
);
export default ShowModal;

基于类的组件

export default class ShowModal extends Component {
  state = {     
  };

  render() {
    return (
      ...Other stuff in here 
    );
  }
}

我收到错误-ReferenceError：无法找到变量：Props

Answer 1

在基于类的组件中，props在类的主要范围中公开。您应该使用this关键字

进行阅读

class Component extends React.Component{
    render(){return this.props.value}
}

Answer 2

我假设您要使用State作为迁移到Class组件的原因。相反，我建议使用React Hooks，这是最新且优雅的方法。

const ShowModal = props => (

const [state, setState] = React.useState({});

  <Modal
    visible={props.display}
    animationType="slide"
    onRequestClose={() => console.log("closed")}
  >
   ...Other stuff in here. 
 </Modal>
);

反应钩：https://medium.com/frontmen/react-hooks-why-and-how-e4d2a5f0347

将功能组件转换为基于类的组件

2 个答案: