Reactjs IF 语句

Question

我有一个我调用的组件，它传递了一个记录 ID，并返回与该 ID 关联的文本。 33 应该 = 塔

将在屏幕上呈现“塔”。都很好，但是...

当我尝试在以下 IF 语句中使用该组件时，它不起作用。

...

if (<GetAssetTypeNameComponent datafromparent = {assettype_assettypeId}/> === "Tower")
{ 
    this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
}

如果我将代码更改为：使用传递的参数确实有效：

...

if (assettype_assettypeId === "33")
        { 
            this.props.history.push(`/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`);
        }

...

我做错了什么？

罗伯

需要成为函数的组件代码.... ...

class GetAssetTypeNameComponent extends Component {
    constructor (props){
        super(props)
         this.state = {
             assettype:[]
        }
    }

    componentDidMount()
    {
        AssetTypeService.getAssetTypeById(this.props.datafromparent).then( (res) =>{
            let assettype = res.data;
            this.setState({isLoading:false});
            this.setState({
                assettypeName: assettype.assettypeName,
                assettypeType: assettype.assettypeType
            });
        });

      
    }
    render() {
        return (
            <div>
               {this.state.assettypeName}  
            </div>
        );
    }
}
export default GetAssetTypeNameComponent;

... 以下函数代码编译： ...

import React, { useState} from 'react';
import AssetTypeService from './AssetTypeService'

    const GetAssetTypeNameFunction = (props) =>{
  // destructuring 
      const { assettype_assettypeId } = props;
      const [assetType,setAssetType] = useState()
    
    AssetTypeService.getAssetTypeById(assettype_assettypeId).then( (res) =>
    setAssetType(res.data));

const arrayMap = assetType.map((post)=>{
return(
       <ul> 
           {post.assettypeName}  
        </ul>
);})

    return (
        {arrayMap}
    );
}
export default GetAssetTypeNameFunction;

... 获取执行错误： 我想是因为我从 eventHandler 中调用了该函数： ...

editAssets(assetsid,assettype_assettypeId){ if (GetAssetTypeNameFunction(assettype_assettypeId) === "Tower") { this.props.history.push(/add-assetstower/${assetsid}/${this.props.match.参数.sitemasterid}）； }]

... ----- 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。我正在响应列表中的 onClick 以根据函数 $ 路由到特定组件 我该如何解决这个问题？

Answer 1

组件渲染要在页面中显示的内容。渲染组件的返回值是包含您的内容的节点树。这一切意味着<GetAssetTypeNameComponent>可能包含文本内容Tower，但不等于字符串"Tower"。将组件渲染为此类条件的测试是没有任何意义的。

在 React 中，您想使用逻辑来告诉 React 如何渲染。您不想在您的逻辑中渲染然后使用结果。

很难给出用这么少的代码解决这个问题的最佳方法的建议，但也许你想要一个简单的函数来为你将 id 转换为一些文本。

function getAssetName(id) {
  return someLogicSomewhere(id).result.orWhatever
}

现在您可以执行以下操作：

if (getAssetName(assettype_assettypeId) === 'Tower')
{ 
    this.props.history.push(
      `/add-assetstower/${assetsid}/${this.props.match.params.sitemasterid}`
    );
}