在反应中，将值传递给函数会导致“未终止模板”等错误

debugcn 发表于 Dev

强大的骆马

我试图在react中将变量传递给函数，以便进行一些条件渲染。

主函数TypeIcon调用该函数iconSwitch并尝试传递变量。

如果我渲染原始文本中传递的文本，则props可以{props.type}正常渲染。我似乎无法将其传递给函数。或正确调用该函数。

TypeIcon文件

import React from 'react';

import '../../App.css'

function iconSwitch(props) {

  switch(props.value) {
    case 'article':
      return  <span><i class="fa fa-file-text" aria-hidden="true"></i></span>;
      //return 'fa fa-file-text';
    case 'video':
      return  <span><i class="fa fa-video-camera" aria-hidden="true"></i></span>;
      //return 'fa fa-video-camera';
    case 'audio':
      return  <span><i class="fa fa-headphones" aria-hidden="true"></i></span>;
      //return 'fa fa-headphones';
    default:
      return 'foo';
  }
}


function TypeIcon (props){

  return (
    <div>
      <iconSwitch value={props.type} />
    </div>
  )
}

export default TypeIcon

这在HTML中呈现为：

<iconswitch value="article"></iconswitch>

而且，如果我修改TypeIcon函数，则会遇到各种错误，这些错误都不会帮助我弄清楚如何将值传递给函数。例如：

意外的标记

function TypeIcon (props){

  return (
<div>
    <span>{props.type}</span>
    {iconSwitch({props.type})}
    </div>
  )
}

退货 Unterminated Template

意外的标记

function TypeIcon (props){

  return (

    <span>{props.type}</span>
    $this.iconSwitch({props.type})
  )
}

返回意外令牌

穆罕默德·费萨尔（Mohammad Faisal）

在react中，Custom Components名称必须以大写字母开头。因此您的iconswitch组件未呈现。

您可以尝试这样做

import React from 'react';

import '../../App.css'

function IconSwitch(props) {

  switch(props.value) {
    case 'article':
      return  <span><i class="fa fa-file-text" aria-hidden="true"></i></span>;
      //return 'fa fa-file-text';
    case 'video':
      return  <span><i class="fa fa-video-camera" aria-hidden="true"></i></span>;
      //return 'fa fa-video-camera';
    case 'audio':
      return  <span><i class="fa fa-headphones" aria-hidden="true"></i></span>;
      //return 'fa fa-headphones';
    default:
      return 'foo';
  }
}


function TypeIcon (props){

  return (
    <div>
      <IconSwitch value={props.type} />
    </div>
  )
}

export default TypeIcon

它应该工作正常。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。