仅当它们从容器传递时如何显示反应数字道具？

Posted 2023-02-23

技术标签:

【中文标题】仅当它们从容器传递时如何显示反应数字道具？【英文标题】：How to display react numerical props only if they pass from the container? 【发布时间】：2019-12-22 17:33:07 【问题描述】：

我有两个不同的容器调用ControlSection 组件。一次通过bestScore 道具，第二次通过level 道具。

在ControlSection 组件中，我只想在<h2> 中显示道具，前提是它们从容器传递过来。我该怎么做？

const ControlSection = ( score, bestScore, level ) => 
    return (
        <div className='controlSection'>
        <div className='gameStatistics'>
            <h2>Score: score</h2>
            bestScore ? <h2>Best: bestScore</h2>
            level ? <h2>Level: level</h2>
        </div>
        </div>
    )

【问题讨论】：

如果 bestScore 或 level 为 0，它不会渲染任何东西，因为 0 是假的。请注意这一点。 How to have conditional elements and keep DRY with Facebook React's JSX?的可能重复 【参考方案1】：

在您的情况下，我会做以下事情来满足您的要求：

const ControlSection = ( score, bestScore, level ) => 
    return (
        <div className='controlSection'>
           <div className='gameStatistics'>
              <h2>Score: score</h2>
                 bestScore != null ? <h2>Best: bestScore</h2> : null
                 level != null ? <h2>Level: level</h2> : null
            </div>
        </div>
    )

通过执行bestScore != null，代码将两个不同的事物标识为false，它们是null 和undefined。请参考以下代码示例：

let bestScore = null;
console.log('testing for null value:', bestScore != null);

bestScore = undefined;
console.log('testing for undefined value:', bestScore != null);

bestScore = '';
console.log('testing for \'\' value:', bestScore != null);

bestScore = 0;
console.log('testing for 0 value:', bestScore != null);

在false 值情况下，h2 标记不会在您的组件中呈现，因此您已经介绍了 2 种情况，即属性中有 undefined 或 null 值。

要处理 0 和 '' 值，您可能需要执行以下操作：

function hasToRender(value) 
    if (value === '') 
        return false;
     else if (value == 0) 
        return true;
     else if (value != null) 
        return true;
    

    return false;


console.log('null', hasToRender(null));
console.log('undefined', hasToRender(undefined));
console.log('\'\'', hasToRender(''));
console.log(0, hasToRender(0));
console.log(17, hasToRender(17));

所以我认为在您的情况下，工作解决方案将涵盖所有情况：

const ControlSection = ( score, bestScore, level ) => 
    function hasToRender(value) 
        if (value === '') 
            return false;
         else if (value == 0) 
            return true;
         else if (value != null) 
            return true;
        

        return false;
    

    return (
        <div className='controlSection'>
        <div className='gameStatistics'>
            <h2>Score: score</h2>
                hasToRender(bestScore) ? <h2>Best: bestScore</h2> : null
                hasToRender(level) ? <h2>Level: level</h2> : null
            </div>
        </div>
    )

当然，hasToRender 函数可以进一步简化，但这给了你想法，希望对你有帮助！

【讨论】：

【参考方案2】：

您正在寻找的术语是条件渲染，并且在定义属性时渲染组件的标准方法是使用 && 运算符。

bestScore && <h2>Best: bestScore</h2>

第二部分，<h2>Best: bestScore</h2>，只有在bestScore 为真时才会被渲染。（你可以在这里使用任何其他条件）

这是因为在 JS 中，undefined、null、0、'' 和 NaN 被评估为假（假）。

false && <h1>something</h1> 将被评估为 false，因此不会被渲染。

回到 bestScore 属性，它也可能为 0 并被评估为虚假。你需要照顾好它。像这样的东西可以工作：

(bestScore || bestScore === 0) && <h2>Best: bestScore</h2>

【讨论】：

【参考方案3】：