類型不可分配給類型 'IntrinsicAttributes & { children?: ReactNode; }'。 財產

Question

我試圖找出解決此錯誤的方法，但沒有成功。

我收到這種類型的錯誤：

輸入 '{ mailData: mailSendProps; }' 不可分配給類型 'IntrinsicAttributes & { children?: ReactNode; }'。 類型“IntrinsicAttributes & { children?: ReactNode; 上不存在屬性“mailData” }'。

我的代碼是這樣的：

<SocialShare mailData={_mailData} />

const _mailData:mailSendProps = {
    url:_seoData.actualURL ?  _seoData.actualURL : '',
    msid:_seoData.msid ?  _seoData.msid : '',
    articlelink:`${_seoData.actualURL}?frm=mailtofriend&intenttarget=no`,
    syn:_seoData.description ?  _seoData.description : 'Page description',
    pageTitle:_seoData.title ? _seoData.title : 'Title VideoShow ',
    subject:`Economictimes.com: ${_seoData.title}` || ''
  }


export interface mailSendProps {
    url?: string,
    msid?:string,
    articlelink?:string,
    syn?:string,
    pageTitle?:string,
    subject?:string
  }



const SocialShare: NextPage = (props?:any) => {
  const url = props.mailData.url && props.mailData.url != '' ? props.mailData.url : ''
  const [showUrl, setShowUrl] = useState('no');
  const [showEmbed, setShowEmbed] = useState('no');
  const [showMail, setShowMail] = useState('no');

  const showHandlerModule = (val:string)=>{
    let _url = '';
    let _embed = '';
    if(val === 'url'){
      _url = 'yes';
      _embed = 'no'
    }else if(val === 'embed'){
      _url = 'no';
      _embed = 'yes'
    }
    setShowUrl(_url);
    setShowEmbed(_embed)
  }
  const closeHandler = ()=>{
    setShowUrl('no');
    setShowEmbed('no')
  }
  const closeMailHandler = ()=>{
    setShowMail('no')
  }
  return (
    <>
        <Share />
        <div className={styles.codeMailVideo}>
          <span onClick={()=>{setShowMail('yes')}} className={styles.email} title="Email this video"></span>
          {
            showMail === 'yes' ? <MailSendTemplate mailData={props.mailData} onclickhandler={closeMailHandler} /> : ''
          }
        </div>
        <div className={styles.codeVideo}>
          <span onClick={()=>{showHandlerModule('url')}}>Copy URL</span>
          {
            showUrl === 'yes' ?  <span className={styles.copyUrlSec}>
            <input readOnly type="text" value={url} className={styles.readUrl} />
            <i  className={styles.close} onClick={closeHandler}></i>
          </span> : ''
          }
        </div>
        <div className={styles.codeVideo}>
          <span onClick={()=>{showHandlerModule('embed')}}>Embed</span>
          {
            showEmbed === 'yes' ? <span className={styles.copyUrlSec}>
            <textarea readOnly defaultValue={`<iframe mozallowfullscreen="true" webkitallowfullscreen="true" allowfullscreen="true" width="560" height="420" frameborder="0" defaultValue=${url} src=${url}></iframe>`}>{

            }</textarea>
            <i  className={styles.close} onClick={closeHandler}></i>
          </span> : ''
          }

        </div>
    </>
  );
};

解決辦法是什么？

Answer 1

TypeScript 對類型檢查很嚴格。 您需要定義SocialShare道具的形狀——即您將在此組件中收到的道具，否則 TypeScript 將標記為“屬性不存在”：

嘗試添加另一個SocialShareProps接口，如下所示：

interface SocialShareProps {
  mailData: mailSendProps;
}

const SocialShare: NextPage<SocialShareProps> = (props) => {
...