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

如何解决反应时，将值传递给函数会导致“未终止模板”等错误

我试图在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})
  )
}

返回意外令牌

解决方法

在react中，自定义组件名称必须以大写字母开头。因此您的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

应该工作正常。