ReactのReact.FCとReact.Componentの初歩的な認識

6766 ワード

React アント Design 先端 react typescript javascript

一、React.FC<>{}
React.FC<>のtypescriptで使用する一つの泛型は、この泛型の中でuseStateを使用できます.個人的にはuseStateがとても使いやすいと思います.例は以下の通りです.

const SampleModel: React.FC<{}> = () =>{   //React.FC<> typescript     
  	const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
  	return{
  	{/**      **/}
  	<Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >  </Button>
  	{/**      **/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

二、class xx extens React.component{}
Javascriptではこのように書くことができます.このような書き方は経典的な書き方です.例は以下の通りです.

class SampleModel extends React.Component {
  state = {
    createModalVisible:false,
  };

  handleModalVisible =(cVisible:boolean)=>{
    this.setState({createModalVisible:cVisible});
  };
  return {
  {/**      **/}
  	<Button onClick={()=>this.handleModalVisible(true)} >  </Button>
  	{/**      **/}
  	<Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> 
  }

ps:接触したばかりで、多くの概念が分かりません.間違いがあれば、ご指摘ください.ありがとうございます.

encodeURI()関数とencodeURIComponent()関数