标签: render

我尝试使用 d3-node 在服务器端制作图表，并尝试使用以下代码将新图表渲染到 ejs： <%= svgChart %> 当我使用浏览器查看它时，它只显示 svg 标签内容，如下所示：

    <svg xmlns="http://www.w3.org/2000/svg" width="960" height="400"><defs>                      <style type="text/css"><![CDATA[  .axis{font: 10px sans-serif;} .axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;} .x.axis path{display: none;} ]]></style></defs><g transform="translate(40,20)"><path d="M20,32.4L20.430000000000003,32.4L20.86,32.4L21.290000000000003,32.4L21.720000000000002,32.4L22.150000000000002,32.4L22.580000000000002,32.4L23.01,32.4L23.44,32.4L23.87,32.4L24.299999999999997,32.4L24.73,32.4L25.16,32.4L25.590000000000003,32.4L26.02,32.4L26.450000000000003,32.4L26.88,32.4L27.310000000000002,32.4L27.740000000000002,32.4L28.17,32.4L28.6,32.4L29.03,32.4L29.46,32.4L29.89,32.4L30.32,32.4L30.75,32.4L31.18,32.4L31.61,32.4L32.04,32.4L32.47,32.4L32.9,32.4L33.33,32.4L33.76,32.4L34.190000000000005,32.4L34.620000000000005,32.4L35.050000000000004,32.4L35.480000000000004,32.4L35.910000000000004,32.4L36.34,32.4L36.77,32.4L37.2,32.4L37.63,32.4L38.06,32.4L38.489999999999995,32.4L38.92,32.4L39.35,32.4L39.78,32.4L40.21,32.4L40.64,32.4L41...............................

不显示图表本身。svgChart 包含 svg 标签的字符串。如果我将 svgChart 内容（字符串）直接复制到 ejs，它将完美显示图表。

加载页面时，ejs 似乎无法渲染标签内容。它认为 svgChart 作为纯字符串。

我的问题：如何使 ejs 将 svgChart 识别为 svg 标签，以便它可以显示 svg 图表而不是标签的文本？

我正在尝试使用 ReactJS 开发一个 Web 应用程序，但遇到了问题。经过1天多的研究，我不明白该怎么做。

我想使用一个组件，它是我的页面的主要布局，添加其他组件以在其中显示。

在组件 Base2 中，子 props 包含另一个组件。

import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';

const Base2 = (child) => (

    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>

        </div>

        <child/> // HERE the dynamic component

    </div>
);

export default Base2;

调用它的函数是：

const TestBase = ({props}) => {
    return (<Base child={MyComponent}/>)
};

此外，MyComponent 可以是一个类，声明以下 2 个方法：

import React from 'react';
import LoginForm …

我正在尝试使用 laravel 和 dompdf lib 生成 pdf 文件。这是我的控制器代码：

public function create(Request $request) {
    $pdf = new Dompdf();
    $html = Storage::disk('local')->get('public/pdf/template.html');
    $pdf->loadHtml($html, 'UTF-8');
    $pdf->setPaper('A4', 'portrait');
    $pdf->render();
    $filename = "Hi!";
    return $pdf->stream($filename, ["Attachment" => false]);
}

我template.html得到了一些 html，在某个地方我得到了这样的图像：

<img src="img/logo.png" alt="BTS">

但 dompdf 无法写入此图像：Image not found or type unknown。我的文件系统是：

.pdf ...img ......here is images ...template.html ...*some_fonts_files*

但与此同时，字体加载得很好。我应该怎么做才能在 template.html 中渲染图像？

我正在使用 ggplot2+gganimate+ggflags 制作绘图，但渲染速度非常慢：通常每秒 0.1 帧或低于 0.1 帧。因此，如果我有 300 帧，则需要很长时间。我注意到是 ggflags 导致它变得比其他方式慢得多。我可以做些什么来加快渲染速度？我正在使用 MacBook Pro。

我非常基本的代码设置如下所示：

plot <- data %>% ggplot2(aes(...)) + geom_flag(...) + lots of options + transition_time(year) 

anim_save("file.gif", plot, ...)

我有子组件，在这里我将父组件的值作为输入传递。在父组件中，我正在事件发射器触发器上更新此输入变量，但子组件不会更新。我已经检查了输入变量更新。为什么子组件不更新？

父组件.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

父组件.ts

data: any;
.
.
.
getUsers() {
  this.usersService.getAllUsers().subscribe(res => {
    this.data = res;
  });
}
.
.
.

filter(data){
  this.data = data
}

寻找一些 React 渲染/useMemo 指南。

我有一个包含 2,000 多个项目的列表，每个项目都是一个 React 组件。有一个“当前选定”项目的突出显示，该项目独立于列表呈现。这允许我只渲染列表一次。

useMemo(_ => {
  <Item .../>
  <Item .../>
  ...
  <Item .../>
}, [contents])

现在我添加了“展开”其中的列表项的功能，这只会添加新的 DOM 元素，而不会修改处于非展开状态的列表项。

您可以将每个部分想象Item为两部分：

function Item(props) {
  return
    <div>
      <SubItem />
      {
        if (props.open) {
          <OtherItem />
        } else {
          null
        }
      }
    </div>
}

useMemo(_ => {
  <Item open={1 == current} .../>
  <Item open={2 == current} .../>
  ...
  <Item open={n == current} .../>
}, [contents, current])

问题：有没有一种方法可以支持这一点，而不必在每次展开/折叠新项目时重新渲染整个列表？

不幸的是，扩展的 DOM 元素是“流动的”，因此扩展会将列表项推到它后面（不仅仅是悬停/覆盖）。

我有一个 RecyclerView 列表，最近布局 Activity_main.xml 中出现了“渲染问题”：

java.lang.NoSuchFieldError: ACTION_SCROLL_IN_DIRECTION at androidx.core.view.accessibility.AccessibilityNodeInfoCompat$Api34Impl.getActionScrollInDirection(AccessibilityNodeInfoCompat.java:5592) [堆栈错误的其余部分如下所示]

一个针对 Android 错误的在线谷歌论坛表明，该问题可能是“implementation 'androidx.core:core:1.12.0'”中的错误，该错误已在下一个 alpha 版本中得到解决。因此，我加载了“implementation 'androidx.core:core:1.13.0-alpha01'”，但这并没有消除问题。

关于这个问题以及如何解决它有什么想法吗？

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:paddingBottom="5dp"
    tools:context=".MainActivity"  >

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <androidx.appcompat.widget.Toolbar

            android:id="@+id/toolbar_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

            <androidx.appcompat.widget.AppCompatImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/action_logo"
                android:title="@string/action_logo"
                android:contentDescription="@string/action_logo"
                android:src="@drawable/ic_toolbar_logo_foreground"
                android:background="#FFFFFF"
                android:gravity="start"
                android:clickable="true"
                android:focusable="true"
                app:showAsAction="always" />

            </androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.AppBarLayout>

    <RelativeLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"

        app:layout_behavior="com.google.android.material.appbar.
AppBarLayout$ScrollingViewBehavior"
        android:layout_marginStart="6dp"
        android:layout_marginLeft="6dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="6dp"
        android:layout_marginRight="6dp"
        tools:context=".MainActivity"
        android:background="@color/colorFlLabelFinal"  >

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/filterListTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginStart="14dp" …

新手Q.

我希望子类化一个UIView,以便它呈现一个圆圈.

怎么在iPhone上完成？

我有一个网格,有字段更新,这是来自db的日期时间,例如2011-03-22 01:45:00

这是我的读者代码:

{name: 'updatedon', type:'datetime'},

这是我的渲染器代码:

{
    id       :'updatedon',
    header   : ' updatedon', 
    width    : 100, 
    sortable : true, 
    dataIndex: 'updatedon',
    renderer: Ext.util.Format.dateRenderer('d/m/Y')
},

我该如何渲染才能获得22/03/2011

在以下版本中，我有两个模型：客户端has_many产品，和Product属于client_to客户端。在客户展示视图中，我展示了一个表单，用于创建自动属于当前客户的新产品。客户端控制器中的show方法

def show
  @client    = Client.find(params[:id])
  @products  = @client.products.paginate(page: params[:page])
  @product = @client.products.new
  @product.client_id = @client.id
end

和显示视图呈现局部

    <h1>New Product:</h1>
    <%= render 'shared/product_form' %>

可行，产品正确创建。

发生验证错误时，我在产品的create方法和redirect_to客户端显示页面中设置了Flash。我在那里丢失了正确填写的数据。我尝试保存@product实例变量，该变量具有所有数据（包括错误的字段）

render client_path(client) 

来自产品控制器，但这会产生错误

缺少模板/ clients / 17

地址为

http://localhost:3000/products

我说错了吗？我知道渲染通常会渲染同一控制器的动作。我可以以某种方式从产品控制器渲染Client :: show吗？还有另一种方法来保存用户键入的数据吗？