小编Yan*_*Tay的帖子

Docusaurus 是否可以支持访客评论？

我正在使用Docusaurus 2构建一个网站。

我的网站将包含文档和博客。我想知道是否可以让访客在文章下面发表评论？

我想，如果我们支持评论，我们也需要网站的身份验证系统。

如果原生 Docusaurus 不支持此功能，是否有任何插件可以做到这一点？

docusaurus

Sof*_*mur

2019 08-20

10
推荐指数

1
解决办法

2853
查看次数

如何使用 Jest + Enzyme 测试 React 组件的样式？

好吧，我有一个名为<TestButton />. 在里面<TestButton />有两个 Semantic UI React 组件，<Button />和<Header>.

基本上，当<Button>单击时，它会切换display: none;到<Header>。

我想检查（我想学习）如何断言<Header>'s display: none;when<Button>被点击。

测试按钮.js

const TestButton = (props) => {
  return (
    <div id='test-button'>
      <Header id='please-hide-me' size='huge'>Please Hide Me</Header>
      <Button
        onClick={
          () => {
            hiding = !hiding;
            let findDOM = document.getElementById(searchForThisID);
            if (findDOM) { findDOM.style.display = hiding ? 'none' : ''; }
            return hiding;
          }
        }
      >
        Sample Toggle …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs jestjs enzyme semantic-ui-react

not*_*eek

2018 01-02

9
推荐指数

1
解决办法

1万
查看次数

如何在React中测量SVG元素？

要在我的应用程序中呈现某些SVG元素,我需要先测量一些其他SVG元素.

例如,想象一个<text>随机放置在正方形(0,0) - (100,100)中的元素,并且可以具有各种字体大小,字体系列等.

如果文本位于(10,20),宽度为30,高度为40,我想将包含<svg>宽度设置为40(= 10 + 30),高度设置为60(= 20 + 40) ).

重点是:<text>需要在渲染之前进行测量<svg>.

为了帮助进行<text>测量,我创建了以下组件:

class MeasureSvgElements extends React.Component {
  storeSvgReference = svg => {
    if (svg !== null) {
      this.svg = svg;
    }
  };

  measure() {
    const childElements = Array.from(this.svg.children);
    const dimensions = childElements
      .map(element => element.getBoundingClientRect())
      .map(({ width, height }) => ({ width, height }));

    this.props.onChange(dimensions);
  }

  componentDidMount() {
    this.measure();
  }

  componentDidUpdate() {
    this.measure();
  } …

Run Code Online (Sandbox Code Playgroud)

svg reactjs

Mis*_*hko

2017 05-10

8
推荐指数

1
解决办法

735
查看次数

未捕获错误:渲染的钩子少于预期.这可能是由React Hooks的意外早期退货声明引起的

给定以下组件,当我按下年龄选择器并将值更改为15,这样我渲染没有驱动程序许可证字段的表单时,我收到错误:

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
    at invariant (react-dom.development.js:55)
    at finishHooks (react-dom.development.js:11581)
    at updateFunctionComponent (react-dom.development.js:14262)
    at beginWork (react-dom.development.js:15103)
    at performUnitOfWork (react-dom.development.js:17817)
    at workLoop (react-dom.development.js:17857)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:17113)
    at renderRoot (react-dom.development.js:17957)
    at performWorkOnRoot (react-dom.development.js:18808)
    at performWork (react-dom.development.js:18716)
    at flushInteractiveUpdates$1 (react-dom.development.js:18987)
    at batchedUpdates (react-dom.development.js:2210)
    at dispatchEvent (react-dom.development.js:4946)
    at interactiveUpdates$1 (react-dom.development.js:18974)
    at interactiveUpdates (react-dom.development.js:2217)
    at dispatchInteractiveEvent (react-dom.development.js:4923)

Run Code Online (Sandbox Code Playgroud)

示例代码如下:

const {useState} = React; …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

Yan*_*Tay

lucky-day

8
推荐指数

4
解决办法

6134
查看次数

如何在Docusaurus V2的index.html的头部添加自定义脚本？

我们正在使用Docusaurus V2创建一个网站。

在Docusaurus V1中，有一个scripts设置siteConfig.js可以定制html的头部内容。但是，我在Docusaurus V2中找不到相应的设置。

根据https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout，似乎可以自定义<head>V2中的html 部分。

布局

Docusaurus的当前状态是它负责整个布局和样式，无意中使用户很难根据自己的意愿自定义网站的外观。

对于Docusaurus 2，布局和样式应由用户控制。Docusaurus将处理内容的生成，路由，翻译和版本控制。受create-react-app和VuePress的启发，Docusaurus仍将提供默认主题，用户可以从中弹出该主题，以进行进一步的布局和样式自定义。这意味着用户甚至有可能通过使用React Helmet来更改HTML元数据。基于社区的主题也很有可能。大多数静态站点生成器都采用这种允许用户负责布局和样式的方法。

我试图用react-helmet的src/pages/index.js，用下面的代码：

function Home() {
  const context = useDocusaurusContext();
  const { siteConfig = {} } = context;
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <Helmet>
        <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
      </Helmet>
    </Layout>
  );
}

Run Code Online (Sandbox Code Playgroud)

}

但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js没有出现在里面<head></head>

有没有人遇到过类似的问题，有人可以提供帮助吗？

javascript react-helmet docusaurus

Sof*_*mur

2019 10-12

8
推荐指数

3
解决办法

98
查看次数

如果同一页面上有多个 React 根（数百个），是否会出现性能问题？

我正在构建一个营销页面并使用类似 Wordpress 的 CMS。因此，页面的大部分 DOM 将在服务器端呈现。我们在页面上有一些交互组件，我们想要使用 React 来构建。因此，每个交互式组件都将是其自己的 React 根并使用ReactDOM.render().

如果我有一个/两个实例，这可能没问题。问题是我有几百个。ReactDOM.render()如果我在同一页面上调用数百次，是否会导致性能问题？如果有，是什么类型的问题？启动时间、交互、页面加载时间等？

这种方法还有哪些其他缺点？

我做过和读过的一些研究：

wordpress performance reactjs

Yan*_*Tay

lucky-day

8
推荐指数

0
解决办法

650
查看次数

什么是适合地图元素的WAI-ARIA角色属性

在我的网页中,我有一半是使用谷歌地图的地图显示.我aria-role应该向canvas显示地图的元素添加什么？我已经查看了WAI-ARIA文档中可能的角色定义,我找到的最接近的是widget.

什么是适合aria-role页面上的地图？

google-maps accessibility wai-aria

Yan*_*Tay

2017 06-23

7
推荐指数

1
解决办法

3201
查看次数

如何通过PhantomJS触发MouseDown？

我试过了:

var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent("mousedown", true, true);
jQuery('.left-rail-facets .facet-list .facet.CS .suggestion[data-value="B"] a')[0].dispatchEvent(clickEvent);

Run Code Online (Sandbox Code Playgroud)

但它无法触发网站上的操作.没有错误返回.

javascript phantomjs

Art*_*ino

2017 12-31

6
推荐指数

1
解决办法

214
查看次数

webpack不支持require.extensions。改用装载机

我用express+ webpack3+ ejs+typescript

当我构建时，stdout输出会给我一些警告：

WARNING in ./node_modules/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./src/environment.ts 4:10-24
 @ ./src/server.ts

WARNING in ./node_modules/ejs/lib/ejs.js
require.extensions is not supported by webpack. Use a loader instead.
 @ ./src/environment.ts 4:10-24
 @ ./src/server.ts

WARNING in ./node_modules/express/lib/view.js
80:29-41 Critical dependency: the request of a dependency is an expression

Run Code Online (Sandbox Code Playgroud)

这是一部分webpack.config.ts：

import * as webpack from 'webpack';
import * as path from 'path';
import * as CopyWebpackPlugin …

Run Code Online (Sandbox Code Playgroud)

ejs node.js express typescript webpack

sli*_*wp2

2019 03-31

6
推荐指数

2
解决办法

5120
查看次数

如何为 Chrome Headless 模仿或设置插件

如何为 Selenium chrome 无头模拟或设置插件长度？我正在遵循本指南

我无法通过 Chrome 选项找到任何有关执行此操作的信息。

我想要这个的原因是我想让 chrome 无头尽可能无法检测。

请尝试以下操作。插件长度仍然是一个问题。

from selenium.webdriver.chrome.options import Options
from selenium import webdriver
options = Options()
options.add_argument("--headless");
user_agent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3240.0 Safari/537.36'
options.add_argument(f'user-agent={user_agent}')
options.add_argument("--lang=en-US,en");

driver = webdriver.Chrome(chrome_options=options)

driver.get('https://intoli.com/blog/making-chrome-headless-undetectable/chrome-headless-test.html')
driver.save_screenshot("screenshot5.png")

driver.close()

Run Code Online (Sandbox Code Playgroud)

正如你在下面看到的，插件长度仍然是可以检测到的。