时间戳

首页 > 解决方案 > 如何在反应中自动检查变量是否存在？

javascript - 如何在反应中自动检查变量是否存在？

问题描述

我有通过道具呈现变量的反应组件。

主.jsx

<div>
   {props.name && <h1>{props.name}</h1>}
   {props.id && <h1>{props.id}</h1>}
</div>

个人.jsx

<div>
   {props.city && <h1>{props.city}</h1>}
   {props.country && <h1>{props.country}</h1>}
</div>

相同的文件以不同的样式重复出现在多个外观中。

结构看起来像。

--Card-1
  --main.jsx
  --personal.jsx
--Card-2
  --main.jsx
  --personal.jsx
--Card-3
  --main.jsx
  --personal.jsx
--Card-4
  --main.jsx
  --personal.jsx

这在未来可能会增加。我想检查/自动化脚本以检查name and idevary main.js中的退出city and country并存在于每个 personal.jsx 文件中

标签： javascriptreactjsgulpgulp-plugin

解决方案

您可以像这样使用 bash 脚本：

#!/bin/bash
PERSONAL_COUNT=$(find . -name "personal.jsx" | wc -l)
CITY_COUNT=$(grep "props.city" **/personal.jsx | wc -l)
COUNTRY_COUNT=$(grep "props.country" **/personal.jsx | wc -l)
MAIN_COUNT=$(find . -name "main.jsx" | wc -l)
ID_COUNT=$(grep "props.id" **/main.jsx | wc -l)
NAME_COUNT=$(grep "props.name" **/main.jsx | wc -l)

[[ $MAIN_COUNT == $NAME_COUNT ]] && echo 'name: OK' || echo 'name: Too less name prop usage in main.jsx files' && exit 1
[[ $MAIN_COUNT == $ID_COUNT ]] && echo 'id: OK' || echo 'id: Too less name prop usage in main.jsx files' && exit 1
[[ $PERSONAL_COUNT == $CITY_COUNT ]] && echo 'city: OK' || echo 'city: Too less name prop usage in main.jsx files' && exit 1
[[ $PERSONAL_COUNT == $COUNTRY_COUNT ]] && echo 'country: OK' || echo 'country: Too less name prop usage in main.jsx files' && exit 1

推荐阅读