小编joh*_*pin的帖子

我正在研究解决方案

我创建了一个基本的 html 横幅，我想在其中保持图像和文本动画同步。

基本上图像动画就像缩放标志大约 3 秒，同时标志是动画的我想要文字在打字效果上相同

我已经使用 css 和 javascript 创建了基本解决方案，但它不同步

var typewriter = function(txt) {
  var container = document.getElementById('typewriter'),
    speed = 28,
    i = 0,
    wordsObj = txt.split(" ")
  container.textContent = "";
  runAllWords();

  function runAllWords() {

    if (i < wordsObj.length) {
      var a = (i == 0) ? i : i - 1;
      setTimeout(function() {
        showWord(wordsObj[i], 0)
      }, wordsObj[a].length * speed);
    }
  }

  function showWord(word, countWord) {
    if (countWord < word.length) {
      setTimeout(function() {
        showLetter(word, countWord)
      }, speed); …

class test{
    name : string
    children : Map<string,string> =new Map()
    constructor(){
        this.name='KIANA'
        this.children.set('name','OTTO')
    }
}
var t = new test()
console.log(t)
console.log(JSON.stringify(t))

结果是：

test { children: Map { 'name' => 'OTTO' }, name: 'KIANA' }
{"children":{},"name":"KIANA"}

我怎样才能得到整个数据，如：

{"children":{'name':'OTTO'},"name":"KIANA"}

或者

{"children":['name':'OTTO'],"name":"KIANA"}

或者，是否有更简单的方法来描述 JSON 和 TypeScript 中“键值”的关系

我决定遵循点符号来创建我的组件库，就像React-bootstrap所做的那样：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

为此，您需要将子组件（如CardBody）嫁接到“主要”组件（此处Card），就像这样：

const Card = ({ children }) => <>{children}</>
const CardBody = () => <>Body</>

Card.Body = CardBody

export default Card

这样你就可以Card很容易地使用所有的孩子：

import Card from 'my-component-library/card'

<Card>
  <Card.Body>
  ...

这种类型的结构在很多组件库中使用，但经过反思，我意识到使用这种结构，这import Card from 'my-component-library/card'是一个重要的动作，因为在引擎盖下可能有几十个组件被导入但未使用（如Card.Header或Card.Text）。

所以我的问题是：这种结构是否存在显着的性能问题？我应该像这样保留默认的“导入有用的组件”结构吗？

import Card from 'my-component-library/card' …

你好，我正在尝试从react-router-dom“typescript”导入useLocation Hook，我找不到它

根据 React Router文档，我很确定它存在。

然而在打字稿中它一直告诉我没有名为 useLocation 的导出成员

这就是我导入它的方式：

import { useLocation } from 'react-router-dom';

这是我得到的错误：

模块“../../node_modules/@types/react-router-dom”没有导出成员“useLocation”.ts(2305)

我正在尝试制作一个带有阴影的夜晚行星的球形图像，以在浏览器中渲染以用于模拟网页，但我一直在与一个我似乎无法弄清楚的奇怪视觉问题作斗争。

这是在 Chrome 中显示的 SVG 图像片段（这也发生在 IE 中），然后放大 3 倍：

您会注意到，在昼/夜终结符的正上方，有一条较暗的微弱水平带，宽度约为其在终结符上方的距离的 1/3。这应该不是在那里，我想不通为什么它的存在或如何摆脱它。

以下是 HTML 片段中的 SVG 代码，以便于查看：

<div style="position:absolute; z-index:1; margin:15px; 
            width:640px; height:640px; 
            background-color:black">

  <svg id="svgEa" style="width:100%; height:100%;" viewBox="-5000 -5000 10000 10000" preserveAspectRatio="xMidYMid meet" clip-path="url(#svgEaClip)" transform="scale(1.0,1.0)" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <!-- NOTE: All internal units are in KM (or %)  -->
    
                <defs id="defsEa">
                    <clipPath id="svgEaClip">
                        <rect width="100%" height="100%" />
                    </clipPath>
                    <linearGradient id="lgdEaSphere">
                        <stop style="stop-color:#ffffff;stop-opacity:1.00;" offset="0.00" id="stopEarthCenter" />
                        <stop style="stop-color:#dfffef;stop-opacity:1.00" offset="0.30" id="stopEarthInner" />
                        <stop style="stop-color:#91ffc8;stop-opacity:1.00" offset="0.31" id="stopEarthMid" />
                        <stop style="stop-color:#00A064;stop-opacity:1.00" …

我有一个使用 Next.js 的单页面网站。我的路线主页/显示了产品列表。该页面的代码位于pages/index.js. 每个产品都有一个，id所以我可以使用 跳转到它/#product-id。

为了使其更加 url 友好，我使用作为product-id路由中的第二个参数来复制此行为，如下所示：/product-id。

我所做的只是product-id使用以下命令查看参数useRouter()：

const selectedProductId = useRouter().query['product-id']

然后使用以下命令滚动到具有此 id 的元素js：

document.getElementById(selectedProductId ).scrollIntoView()

所以我将脚本名称从 更改/pages/index.js为/pages/[product-id].js.

所以现在路线/1234工作已预期，但如果我去的话，/我会收到错误 404。

那么有人知道我如何匹配/和/param使用一个js文件吗？

我使用 React hooks 创建一个应用程序。我有一个辅助函数，当您单击提供使用的组件外部时，该函数onClickOutsideHook(ref, callback)会触发：callbackrefReact.useRef

export const onClickOutsideHook = (ref, callback) => {
  // Hook get from https://stackoverflow.com/a/42234988/8583669

  React.useEffect(() => {
    const handleClickOutside = event => {
      if (ref?.current && !ref.current.contains(event.target)) {
        callback();
      }
    };
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [callback, ref]);
};

我有一个Dropdown使用此帮助程序的组件，因此当您在其外部单击时它会关闭。该组件有一个Modal使用 的子组件ReactDOM.createPortal。我用它来渲染， Modal以便body它可以覆盖所有应用程序屏幕。我的Modal包含一个按钮，当您单击它时会发出警报消息： …

在 Svelte 中，我可以将自定义类传递给子组件，如下所示：

图标.svelte

<script>
  export { className as class };
  
  let className = '';
</script>

<img src='...' class={className} />

应用程序.svelte

<script>
  import Icon from './Icon/Icon'
</script>

<div id='app'>
  <Icon class='custom-icon' />
</div>

如果我检查渲染的 DOM，我会发现该类已成功分配给组件Icon：

<img src='...' class='custom-icon' />

但是如果我为.custom-iconin定义某种样式App.svelte，它们就不会被应用：

<script>
  import Icon from './Icon/Icon'
</script>

<style>
  .custom-icon {
    border: solid 2px red;
  }
</style>

<main>
  <Icon class='custom-icon' /> <!-- Icon has no red border -->
</main>

检查代码和框。

那么有人知道如何使用类为父组件设计子组件的样式吗？

我正在使用Draftjs创建富文本编辑器，但找不到任何资源来帮助我解决问题。

请首先查看代码和框。

您可以看到包含链接（testtest红色）的文本。如果你点击它，你会在表格中看到链接的一些信息：

|  link src         | http://localhost:8080/testtest |
|  link text        | testtest                       |
|  link Entity key  | ab5a7c6d...                    |

感谢我的getCurrentLinkKey助手，我得到了当前的链接密钥 () ：

|  link src         | http://localhost:8080/testtest |
|  link text        | testtest                       |
|  link Entity key  | ab5a7c6d...                    |

然后使用此密钥，我可以Entity使用getCurrentLinkEntityhelper获取链接：

const getCurrentLinkKey = (
  editorState: EditorState,
  contentState?: ContentState
): string => {
  if (contentState === undefined) {
    contentState = editorState.getCurrentContent();
  }

  const startKey …

我正在使用Draftjs创建一个富文本编辑器。这是最小的代码和框，以便您了解问题所在。

所以我有一个辅助函数getCurrentTextSelection，它返回我正在选择的文本：

const getCurrentTextSelection = (editorState: EditorState): string => {
  const selectionState = editorState.getSelection();
  const anchorKey = selectionState.getAnchorKey();
  const currentContent = editorState.getCurrentContent();
  const currentContentBlock = currentContent.getBlockForKey(anchorKey);
  const start = selectionState.getStartOffset();
  const end = selectionState.getEndOffset();
  const selectedText = currentContentBlock.getText().slice(start, end);

  return selectedText;
};

当我在文本编辑器外部单击时，焦点会丢失，因此不会选择文本（但保留 的选定文本editorState）。

是否有一种编程方式可以使用 重新选择此文本editorState？这样，当您单击该Select text again按钮时，文本编辑器中的文本就会被选中。