标签: render

Three.js - 渲染对象始终位于顶部

我正在尝试实现一个跟随屏幕上鼠标的命令箭头,但有时它最终隐藏在另一个对象后面。有没有办法调整 z 缓冲区或其他东西来始终将箭头渲染在顶部。我不想在顶部创建第二个场景(如此 处的解决方案所示:Three.js - Geometry on another )。谢谢。

javascript render three.js

7
推荐指数
2
解决办法
7525
查看次数

如何在 Katex 中创建换行符?

我正在尝试在浏览器上测试 katex 的渲染。它渲染正确,但是当我尝试使用\\newline来表示换行符时,它会抛出一个错误:

\n\n
\n

ParseError:KaTeX 解析错误:预期 \'EOF\',在位置 45 处得到 \'\\newline\':\xe2\x80\xa6)-\\tfrac{1}{2}x\\\xcc\ xb2n\xcc\xb2e\xcc\xb2w\xcc\xb2l\xcc\xb2i\xcc\xb2n\xcc\xb2e\xcc\xb2 \\Righta\xe2\x80\xa6

\n
\n\n
<body>\n   <div class="maths">\n       \\Rightarrow\\quad F(x)-\\tfrac{1}{2}x\n       \\Rightarrow\\quad  F(x)-F(a)\\leq\\tfrac{1}{2}(x-a)[2ex]\n</div> \n<script>\n// Get all <div class ="maths"> elements in the document\n    var x = document.getElementsByClassName(\'maths\');  \n    for (var i = 0; i < x.length; i++) {\n        try {\n            if (x[i].tagName == "DIV") {\n                t = katex.render(x[i].textContent, x[i], { displayMode: true });\n            } else {\n                t = katex.render(x[i].textContent, x[i]);\n            }\n        }\n        catch (err) {\n            x[i].style.color = \'red\';\n            x[i].textContent …
Run Code Online (Sandbox Code Playgroud)

javascript render katex

7
推荐指数
1
解决办法
9137
查看次数

在 ES6 类 React 组件的 render 方法中使用返回 JSX 的 React 组件函数会导致错误

我有一个返回 JSX 的函数,如下所示:

  function struct(locals) { 
    return (
      <View style={fieldsetStyle}>
        {label}
        {error}
        {rows}
      </View>
    );
}
label, error, and rows are functions that also return JSX.
Run Code Online (Sandbox Code Playgroud)

我在 ES6 类组件的 render 方法中调用此函数

class Component extends React.Component {
  render() {
    const locals = this.getLocals();

    return struct(locals); 
  }
}
Run Code Online (Sandbox Code Playgroud)

当我运行代码时,出现错误

元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:对象。检查渲染方法Struct

如何从结构体函数中获取结果来渲染为 Component 类 render 的返回值?

javascript render jsx reactjs

7
推荐指数
1
解决办法
3万
查看次数

useState() 做双重渲染

我在函数组件中使用 useState() 并且第一次渲染调用了两次。它是正确的还是错误的?如果正确,为什么要渲染两次?setCount 也渲染组件两次。

function Example() {
  const [count, setCount] = useState(0);
  console.log("render");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('uu5'));
Run Code Online (Sandbox Code Playgroud)

谢谢

render reactjs react-hooks

7
推荐指数
1
解决办法
3406
查看次数

仅在 Vue 或 Nuxt 项目中为 SEO 预渲染某些页面

我正在用 Vue 或 Nuxtjs 规划一个新项目。我想使用 Firebase Auth/functions/storage/firestore 作为后端,因此在 firebase 上托管也很好。我也很想使用 Vuetify。

Landingpage、About、Contact 必须很容易被谷歌索引,但用户登录后的应用程序与 SEO 无关。

我认为预渲染将是最好和最简单的解决方案。所以我测试了一些例子,但没有设法只渲染某些页面。

我使用 prerender-spa-plugin 来选择路由,但在运行 nuxt build 并部署到 firebase 后,所有路由都被预渲染。

Nuxt App 以通用模式运行:

  mode: 'universal',
Run Code Online (Sandbox Code Playgroud)

为了配置 Webpack,我在 nuxt.config.js 中使用了它:

plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html',
                inject: false
            }),
            new PrerenderSPAPlugin({
                staticDir: path.join(__dirname, './dist'),
                routes: ['/', '/about'],
            })
        ],
Run Code Online (Sandbox Code Playgroud)

部署版本可以在这里找到。

我想,如果我正在运行 nuxt build 并部署 dist 文件夹,则应该只预渲染 / 和 /about,其余的应该像普通的 SPA 一样。

这是构建一个在登陆页面上对 SEO 友好但在用户登录后成为水疗中心的应用程序的方法吗?

seo render prerender vue.js nuxt.js

7
推荐指数
0
解决办法
949
查看次数

在某些 android 设备中,图像不会在 FlatList 上呈现

它不会在某些 android 中呈现,例如 moto g4 和三星 a50 !它在某些 Android 设备和 iOS 中完美呈现。当用户尝试打开应用程序时,图像未按预期呈现。

反应本机版本:

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 943.08 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 16, 23, 24, 25, 26, 27, 28
      Build Tools: …
Run Code Online (Sandbox Code Playgroud)

android image render react-native react-native-flatlist

7
推荐指数
2
解决办法
1188
查看次数

为什么在`array.length &amp;&amp; ...`的短路评估中呈现“0”

目前,我看到这样的行为:

render() {
   const list = [];
   return (
      <div>
         { list.length && <div>List rendered</div> }
      </div>
   )
}
Run Code Online (Sandbox Code Playgroud)

我的预期是在该条件下没有呈现任何内容,但是呈现了字符串“0”(字符串“0”是list.length)。我不知道为什么。有人可以帮我向 React 解释这个案例吗?

javascript render conditional-statements reactjs

7
推荐指数
2
解决办法
1388
查看次数

在查看器窗格中打开 R Markdown

我正在使用 rmarkdown 包的渲染函数渲染带有参数的 R Markdown。

rmarkdown::render("file.Rmd", params = "ask")
Run Code Online (Sandbox Code Playgroud)

它会打开我的默认浏览器(Chrome),要求输入参数。我希望它不是在默认浏览器中打开,而是在查看器窗格中打开。或者,也可以在不同的浏览器中,例如 IE。

browser parameters r render r-markdown

7
推荐指数
2
解决办法
1万
查看次数

无法在当前主题中找到“@attr/shapeAppearanceSmallComponent”

我正在尝试在 android 中实现芯片布局,我也将我的谷歌材料依赖项更新到了最新版本。但是 XML 文件引发了这个问题

Failed to find '@attr/shapeAppearanceSmallComponent' in current theme.

梯度文件

allprojects {
    repositories {
        google()
        jcenter()

        maven {
            url 'https://jitpack.io'
        }

    }
}


<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimaryDark</item>

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
Run Code Online (Sandbox Code Playgroud)

XML文件

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.chip.ChipGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text" />

</com.google.android.material.chip.ChipGroup>
Run Code Online (Sandbox Code Playgroud)

xml android render material-design material-components-android

7
推荐指数
2
解决办法
6789
查看次数

当我关闭并重新打开反应组件(材质表)时,为什么会发生内存泄漏并且渲染速度变慢?

我有基本的反应示例用于学习,我在我的组件之一中使用材料表。每次我更改页面并重新打开它(卸载和安装组件)时,包含材质表的组件加载速度会更慢。我在下面分享我的代码。


import MaterialTable from 'material-table';

const columns = [
    { title: 'Id', field: 'id', hidden: true },
    { title: 'Username', field: 'username' },
    { title: 'Name', field: 'name' },
    { title: 'Phone', field: 'phone'}
];

const tableData = [
    {
        id: 1,
        username: "User-1",
        name: "name-1",
        phone: "555 444 33 22"
    },
    {
        id: 2,
        username: "User-2",
        name: "name-2",
        phone: "111 222 33 44"
    },
    {
        id: 3,
        username: "User-3",
        name: "name-3",
        phone: "999 999 99 99"
    }
];

const …
Run Code Online (Sandbox Code Playgroud)

javascript render typescript reactjs material-table

7
推荐指数
1
解决办法
1210
查看次数