Question

我有两个不同的容器，它们分别调用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>
    )
}

Answer 1

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

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

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

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

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

回到bestScore道具，它也可以是0并被评估为虚假。您需要注意这一点。这样的事情可能会起作用：

{(bestScore || bestScore === 0) && <h2>Best: {bestScore}</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，代码将false和null识别为undefined 2种不同的事物。请参考以下代码示例：

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

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

或

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

仅当数值道具从容器中通过时，如何显示它们？

3 个答案: