小编Die*_*ani的帖子

我尝试实现前缀 last: ，但没有成功，如 Tailwind.css 文档中所示。谁能指出我做错了什么？我无法完成这项工作。

先感谢您。

反应组件

{items.map((item, i) => {
            return (
              <li
                key={i.toString()}
                v-for="(item, i) in items"
                className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
              >
                <div className="grid grid-cols-12">
                  <div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8  pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
                    <div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
                      {item}
                    </div>
                  </div>
                  <div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
                    <div className="text-p sm:text-p">{description[i]}</div>
                  </div>
                </div>
              </li>
            )
          })}

我刚刚在styled-components 文档中读到以下错误,它将影响渲染时间.如果是这种情况,我如何重构代码并使用所需的道具来创建动态样式？

先感谢您.

标签组件

import React from 'react'
import styled from 'styled-components'

const Tab = ({ onClick, isSelected, children }) => {
    const TabWrapper = styled.li`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    margin: 1px;
    font-size: 3em;
    color: ${props => (isSelected ? `white` : `black`)};
    background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
    cursor: ${props => (isSelected ? 'default' : `pointer`)};
`

    return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}


export default Tab

我在iOS上遇到了react-native JS调试器的问题.当我尝试使用JS Debugger工具调试我的应用程序时发生错误.我在网上尝试了不同的解决方案但没有成功.有没有人遇到过这个错误并设法修复它？

复制:

1)在真实的iOS设备上运行开发应用程序,从http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false加载JS包

2)启用JS Remote调试工具,在Chrome中打开http:// localhost:8081/debugger-ui /.

3)捆绑重新加载,Chrome DevTools控制台显示以下错误:

无法加载http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:8081 '访问.如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.(索引):188 Uncaught(in promise)TypeError:无法获取

"react": "16.2.0",
"react-native": "0.52.1"

我正在使用react-spring 中的视差来创建视差效果。我知道可以使用其父级的高度来设置其面积。然而，此解决方案在滚动时通过保持 和 在屏幕上可见而导致奇怪的行为。我在这里有几个问题：

1. 我怎样才能以正常的方式设置这个布局？
2. 我是否需要将 和 放置在具有固定高度的 ParallaxComp 内部（我希望有更好的解决方案）？
3. 有没有办法根据里面的内容来假设其高度，而不是使用道具因子？

先感谢您。

代码沙箱

应用程序.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

视差Comp.js

import React from "react";
import { …

当我将鼠标悬停在包含 React 组件的 div 上时，我的行为会更改页面中元素的不透明度。这种行为效果很好。但是，我注意到每次事件都会触发包装的组件重新渲染。我想避免这种情况。有办法防止这种情况吗？

顺便说一句，我在相关组件中使用 React.memo() 。

我非常感谢您提供的任何帮助。

伪代码

• 检测光标是否位于组件上
• 如果确认悬停，则更改另一个组件的不透明度，而无需重新渲染包装的组件

代码

<div
  role="none"
  onMouseEnter={() => {
    setIsShown(cursorOpacity)
  }}
  onMouseLeave={() => {
    setIsShown(1)
  }}
>
  <SectionHeader />
</div>

由于某种原因，我无法弄清楚，我在以下React组件中收到语法错误。该错误是在第一个curly bracket上renderItem()。怎么了？

先感谢您。

import _ from 'lodash';
import React from 'react';
import { ToDoListHeader } from './todo-list-header';
import { ToDoListItem } from './todo-list-item';

export const ToDoList = (props) => {
  renderItems() {
    return _.map(this.props.todos, (todo, index) => <ToDoListItem key={index} {...todo} />)
  }

  return (
    <div>
      <table>
        <ToDoListHeader />
        <tbody>
          {/* {this.renderItems()} */}
        </tbody>
      </table>
    </div>
  );
}

我试图将轨道控制添加到我的场景中，但没有成功。下面的代码不断给我一个错误Uncaught TypeError: THREE.OrbitControls is not a constructor。我尝试了在网上遇到的不同解决方案，但错误仍然存​​在。我究竟做错了什么？

伪代码

• 添加轨道控制
• 能够在场景中使用轨道控制

先感谢您。

代码笔

HTML

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
    <script src="https://82mou.github.io/threejs/js/OrbitControls.js"></script>
    </body>
</html>

JS

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

// var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

// var renderer = new THREE.WebGLRenderer();
// renderer.setSize( …

我尝试模糊 SVG 剪辑路径，但没有成功。我尝试了不同的解决方案，但没有一个有效。我不确定除了 之外是否还有其他解决方案filter。

伪代码

• SVG 剪辑路径应显示下面的文本
• SVG 的边缘应该模糊

先感谢您。

超文本标记语言

    .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .h1, blur {
      width: 100vw;
      height: 100vh;
    }
    
    .h1 {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      font-size: 4em;
      clip-path: url(#svgPath);
      background-color: blue;
    }
    
    .blur {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      font-size: 4em;
      color: blue;
      background-color: white;
      filter: blur(8px)
    }

<div class="wrapper">
      <h1 class="blur">
        Our principles inform everything …