小编Wil*_*iam的帖子

我对剧作家很陌生。由于我的测试套件，我需要在运行每个测试之前登录我的应用程序。在一个简单的规范文件中，我可以简单地调用test.beforeEach. 我的问题是：我需要在每个规范文件的每次测试之前登录。

test.describe('Test', () => {
    //I need to make the code inside this beforeEach a exported 
    //function to call inside the before each of every spec file I have
    test.beforeEach(async ({ page }) => {
        await page.goto('/login');
        await page.click('text=Log in with Google account');
        await page.fill('id=identifierId', LoginAutomationCredentials.USER);
        await page.click('button[jsname="LgbsSe"]');
        await page.fill('input[type="password"]', LoginAutomationCredentials.PASSWORD);
        await page.click('button[jsname="LgbsSe"]');
        const otp = authenticator.generateToken(LoginAutomationCredentials.TOKEN);
        await page.fill('id=totpPin', otp);
        await page.click('button[jsname="LgbsSe"]');
    });

    it('Some description', async ({ page }) => {
        await page.goto('/foo');
        const dateFilter = await …

为了提供一些背景信息，我正在进行一项专注于数字营销和用户体验的研究。为了进行研究，我必须能够从 UI 中的每个组件获取事件日志，这样我就能够创建可用性模式的数据集。

要在 Web 界面中执行此操作（例如使用 JavaScript）非常简单。

window.addEventListener("someEvent", (e) => {//do something with the data});

该e元素为我提供了所需的一切，如果我想监听所有窗口事件，我可以通过窗口对象事件运行 for 循环，并向每个. 我的问题是移动开发。出于跨应用程序的原因，我是否正在使用 React Native 来尝试创建与window.addEventListener移动应用程序相同的效果。

这是我第一次使用 React Native。经过一番搜索，我现在知道 React Native 没有 window 对象（至少不是我们理解的 JavaScript 中的 window 对象），并且该界面被转换为平台本机组件，因此document.getElementBy...也不起作用。

我想到的是refs。我只需要添加对顶部组件的引用App。那么到目前为止我所做的工作是：

export default function App() {
  const viewRef = useRef();

  useEffect(() => {
    //I can use ref here to iterate through all events of View and
    //bind event listeners to it
  }, …

我的应用程序相当大，因此为了拥有更有条理的翻译文件，我想使用嵌套命名空间。例子：

{
    "contract": {
        "index": {
            "pageTitle": "Contract"
    }
}

问题是当我访问它时。在这个问题的帮助下，我发现我可以通过使用它来访问索引内的键，如下所示：

const { t, i18n } = useTranslation('contract', { useSuspense: false });
...
t('index.pageTitle')

问题是似乎没有必要index.为我想要访问的每个键添加前缀。我想做的是导入命名空间索引而不是合约，并按如下方式使用它：

const { t, i18n } = useTranslation('contract:index', { useSuspense: false });
...
t('pageTitle')

这是行不通的。我contract.index也尝试过。在官方文档中我没有找到任何关于嵌套的内容。是否有可能完成我想要做的事情，或者我必须坚持为每个键添加前缀？

在 React 应用程序中创建一个 index.js 文件是很常见的事情，其唯一目的是导出多个模块，以避免在其他组件上有太多导入语句。这可以通过以下方式完成：

索引.js

export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';

任何可能使用这些导出的模块：

import * as var_name from index.js

这非常好。它将导出包装到单个文件中。但是，当我将项目更改为 React with typescript 时，我发现.tsx文件无法像这样导出。下图是我将项目更改为 typescript 且扩展名变为后出现的错误.tsx

有没有一种方法可以“捆绑”导出.tsx具有上面所示结构的 React 文件？.tsx如果没有，集中文件导出的最简单方法是什么？

我的 webpack.config.js：

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: ["sass-loader"]
        }]
    }
};

我有一组锚标签看起来像几个盒子,中间有文字.我想要的是将它们内部的所有文本设置为完全居中,宽度和高度.我可以完成高度部分display: inline-flex; align-items: center;,但我无法设置文本水平中心.这是那些锚点的HTML和它的样式:

<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Reconhecimento</a>

我想要的只是text-align: center对他们的影响.有帮助吗？

<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Reconhecimento</a>
<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Neurociência</a>
<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Envolvimento Emocional</a>

在_ViewStart.cshtml这里有这段代码:

@{ 
Layout = "~/Views/Shared/_Layout.cshtml";
}

这使得每个视图页面都可以导入它.当我不希望页面加载Layout.cshtml它的视图时,我该怎么办？我只想在某些页面上进行,而不是全部.

我必须使边框覆盖它的内容以匹配此图像的外观:

我得到了它的全貌:

我需要将边框覆盖为绿色内容.我怎么能完成它？z-index正如我研究的那样,我不能用它.HTML和CSS代码如下:

HTML:

.box-border a {
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}

.box-border a:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}


.box-border-participe {
  position: relative;
  float: right;
  margin-right: 30%;
  border: 4px solid white;
}

.box-participe {
  background-color: #94C120;
  padding: 10px 40px;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: -20px;
  margin-right: -20px;
}

body {
  background:grey;
}

CSS:

<div class="box-border box-border-participe">
  <div class="box-participe">
    <a>Participe</a>
  </div>
</div>

我在一个项目中使用 Chart.js，因为它是 MIT 许可证，而不是 Highcharts 框架。在 highcharts 上可以轻松完成一件事，而 Charts.js 似乎无法做到这一点，即在条形图顶部添加标签，如下面的演示所示：

在 highcharts文档中，此条形图每个堆栈上的数字按以下方式配置：

plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    

我广泛阅读了Chart.js 文档，但没有找到实现相同可视化的方法，也没有找到论坛中的示例。有没有办法使用 Chart.js 条形图在条形上显示数字？

当您将值赋予变量并且该值可能未定义时，Typescript 会报错。通常可以通过!在您传递的值后面插入或使用简单的if语句来解决这个问题。问题是第一个对我不起作用，使用后者会导致我在代码中添加不必要的额外行。场景如下：

我有这个界面。我使用它的数组作为我的组件状态：

interface IFormFields {
    name: string; isValid: boolean; content: string; isUnchanged: boolean; tip: string
}

...

const [requiredFields, setRequiredFields] = useState<Array<IFormFields>>([]);

后来我想让requiredFields对象使用它们的值。我想通过使用 JavaScript 的find方法来做到这一点：

requiredFields.find(field => field.name === "Nome")

此行会导致错误，因为“field”可能未定义。在这种情况下，K 运算符会导致另一个错误

requiredFields.find(field! => field.name === "Nome")
//"Cannot find name 'field'.ts(2304)"

正如我所说，使用if子句会导致大量不必要的代码行，因为requiredFields其中可以有 n 个对象。有什么解决方法吗？