只有当它们从容器中通过时，如何显示反应数字道具？

Question

我有两个不同的容器调用 ControlSection 组件。第一遍 bestScore prop 和第二遍 level prop.

在 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>
    )
}

Answer 1

{typeof bestScore !== 'undefined' && <h2>Best: {bestScore}</h2>}

或

{typeof level === 'number' && <h2>Level: {level}</h2>}

Answer 2

针对您的情况，我会执行以下操作来满足您的要求：

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，代码将 2 个不同的东西识别为 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 函数，但这为您提供了思路，希望对您有所帮助！

Answer 3

您要查找的术语是条件渲染，定义 prop 时渲染组件的标准方法是使用 && 运算符。

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

第二部分 <h2>Best: {bestScore}</h2> 仅在 bestScore 为真时才会呈现。（你可以在这里使用任何其他条件）

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

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

回到 bestScore 道具，它也可以为 0 并评估为 falsy。你需要照顾好它。像这样的东西可以工作：

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

只有当它们从容器中通过时，如何显示反应数字道具？

How to display react numerical props only if they pass from the container?

components

reactjs

react-props