React.FC详细解说

Posted 2023-04-08 郑建007

1.React.FC是一个函数式组件，是在TypeScript使用一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent

const App: React.FunctionComponent< message: string > = ( message ) => (
    <div> message </div>
);

//简写
interface PropsType
  message : string;

const App: React.FC<PropsType> = ( message ) => ( // message 相当于解构赋值，从props中解构
    <div> message </div>
);

//声明了一个函数组件App   泛型为message: string  
//我能不能这么理解  泛型就是给组件里面使用的参数指定类型 

2. React.FC 包含了 PropsWithChildren 的泛型，不用显式的声明 props.children 的类型。React.FC<> 对于返回类型是显式的，而普通函数版本是隐式的（否则需要附加注释）。

3.React.FC提供了类型检查和自动完成的静态属性：displayName，propTypes和defaultProps（注意：defaultProps与React.FC结合使用会存在一些问题）。

4.我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API。

//组件实现实时时间刷新显示
import React, useState, useEffect from 'react'; //引入依赖
export App: React.FC<> = (props) =>  //泛型里面有对象 属性名 (解构)  泛型为空对象就直接写props
    const [date, setDate] = useState(new Date());  //useState()括号里面的值给date
    useEffect(() => 
        const timer = setInterval(() => 
            setDate(new Date()); //setDate() 括号里面的值给date   date的值只能通过setDate()设置
        , 1000)
    , []);
    return (
        <div>
            <h3>现在时间是</h3>
            <p> date.toLocaleTimeString </p>
        </div>
    )
  

（1）const [date, setDate] = useState(new Date());

（2）useState很简单，就相当于class函数式组件中的state，useState(值)，其中的值表示初始化           值，date表示接收值，setDate表示设置值

（3）可以把 useEffect Hook 看做componentDidMount(组件挂载完成) componentDidUpdate(组             件更新完成) 和 componentWillUnmount(组件销毁调用) 这三个函数的组合

（4）useEffect最后[]中括号中的参数表示当此参数更新时，其中的方法再次执行一遍，如果没有             参数，则是空。

（5）useEffect里的return表示组件卸载的时候执行的动作，

（6）useEffect会在组件加载完成以后，执行一次，所以有第一条中，其可以控制三个生命周期

（7）如果没有后面的参数，甚至没有[]，即useEffect(()=>),这种情况下，每当页面中useState值发生变化，useEffect中的代码就会执行一次，这是不可取的！！

React Typescript：在 React.FC 中设置状态以更改 React.Component 中的值

【中文标题】React Typescript：在 React.FC 中设置状态以更改 React.Component 中的值

【英文标题】：React Typescript: SetState inside React.FC to change value in React.Component

【发布时间】：2022-01-23 21:46:57

【问题描述】：

我有一个React.Component 状态为modalVisible 来打开一个模态：

<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
   />
</Modal>

Modal 打开后React.FC <FormStrucutre ... /> 被渲染，问题是我不知道如何更改modalVisible 内的状态值React.FC：

 const Submit = () => 
        fetch('api/Call/Save', 
            headers:  'Content-Type': 'application/json' ,
            method: 'POST',
            body: JSON.stringify(
                'No': form.getFieldValue('no')
            )
        )
            .then(() => this.setState(modalVisible: false); //TS2532  (TS) Object is possibly 'undefined'.
    ;

【问题讨论】：

这有帮助吗？ this!.setState(modalVisible: false

【参考方案1】：

你必须将 closeModal 方法传递给React.FC <FormStructure />

// class component

<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
      closeModal=() => this.setState(modalVisible: false)
   />
</Modal>

使用 FormStructure 中的道具

// FormStructure.tsx

const FormStructure = (props: any) => 
  const record, question, dropdownItems, closeModal = props;

  const onSubmit = () => 
     ....
     closeModal();
  

【参考方案2】：

一个常见的模式是将回调作为 props 传入，子组件在事件发生时调用回调。在这种情况下，您可以公开 onSave 道具：

// parent
<Modal
   visible=this.state.modalVisible
>
   <FormStructure
      record=this.state.selectedRecord
      question=this.state.question
      dropdownItems=this.state.dropdownItems
      onSave=() => this.setState(modalVisible: false)
   />
</Modal>


// child
class FormStructure extends React.Component 
   const Submit = () => 
        fetch('api/Call/Save', 
           // ...
        )
            .then(() => this.props.onSave();
    ;