标签: react-dom

我正在使用React的ES6类API(通过使用TypeScript)并希望React.Component使用类型呈现类型的子类型ReactDOM.render().

以下代码有效:

class MyComponentProps {
    someMember: string;
}

class MyComponent extends React.Component<MyComponentProps, {}> {
    constructor(initialProps: MyComponentProps) {
        super(initialProps);
    }
}

let rootNode = document.getElementById('root');
ReactDOM.render(
    <MyComponent someMember="abcdef" />,
    rootNode
)

现在,给定构造函数的显式输入react.d.ts,我假设我可以传递一个填充初始属性的MyCustomProps对象的实例(如上面的代码所示).但是如何在没有JSX/TSX语法的情况下直接渲染组件？

以下不起作用:

ReactDOM.render(new MyComponent(new MyComponentProps()), rootNode);

我知道我可以使用JSX语法作为解决方法,但由于我的MyCustomProps对象非常大,我不想重复该MyCustomProps对象的每个成员.

我知道这不是惯用的React,但我正在研究一个React组件(反向滚动视图),它需要在渲染之前和渲染之后获得下游虚拟DOM更改的通知.

这有点难以解释所以我创建了一个JSFiddle起点:https://jsfiddle.net/7hwtxdap/2/

我的目标是让日志看起来像:

Begin log

render

rendered small

rendered small

rendered small

before update

rendered big

after update

before update

rendered big

after update

before update

rendered big

after update

我知道React有时批处理DOM更改,这很好(即日志事件可能before update; rendered big; rendered big; after update; ...) - 重要的是我在DOM更改之前和之后实际通知了.

我可以通过指定回调来手动近似行为,如下所示:https://jsfiddle.net/7hwtxdap/4/.然而,这种方法并不具有规模 - 例如,我需要让后代而不是儿童发生事件; 而且不想在我使用的每个组件上添加这些事件处理程序.

使用案例:

我正在为消息制作一个"反向滚动组件"(其中,当添加新元素或现有元素改变大小时,滚动更改的基础是从内容的底部而不是每个消息传递应用程序的顶部ala)动态修改了子节点(类似于<MyElement />类但具有可变高度,来自ajax的数据等).这些不是从类似Flux的状态存储中获取数据,而是使用pub-sub数据同步模型(与setTimeout()非常接近).

要使反向滚动工作,您需要执行以下操作:

anyChildrenOfComponentWillUpdate() {
  let m = this.refs.x;
  this.scrollBottom = m.scrollHeight - m.scrollTop - m.offsetHeight;
}
anyChildrenOfComponentDidUpdate() {
  let m = …

我正在我的React/Redux应用程序中第一次尝试服务器端渲染.我现在遇到的一个问题是我需要初始状态来生成一个随机生成的字符串,然后将其作为prop传递给我的主要App组件.这显然是一个问题,因为它为客户端和服务器生成不同的字符串.我能做些什么来阻止这个问题的发生吗？

帮助理解的基本结构:

App.js

import React from 'react';
import { connect } from 'react-redux';

const App = ({ randomStr }) => (
  <div> 
    <p>{randomStr}</p>
  </div>
);

const mapStateToProps = (state) => ({
  ...
});

const mapDispatchToProp = (dispatch) => ({
  ...
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

而我的减速机:

reducer.js

import { generateString } from '../util';
import { NEW_STRING } from '../constants';

const stringReducer = (state = generateString(), action) => {
  switch (action.type) {
    case NEW_STRING:
      return generateString();

    default: …

我们有一个疯狂的DOM层次结构,我们已经在道具中传递JSX而不是嵌入子节点.我们希望基类管理显示子项的哪些文档,以及哪些子项停靠或附加到其关联文档窗口的顶部.

• List(疯狂物理学将内联样式写入基类包装器)
  1. 自定义表单(将JSX行传递给Base类)
     • 基类(连接到列表)
  2. 自定义表单(将JSX行传递给基类)
     • 基类(连接到列表)

问题是我们正在传递深层嵌套的JSX,而状态管理/访问表单中的引用是一场噩梦.

我不想每次都重新声明每一行,因为这些行在基类中附加了额外的状态,而基类需要知道实际更改了哪些行.如果我不重新声明行,这很容易.

我不知道如何在Custom Form中实际处理JSX行.

1. Refs只能附加在子程序中render().如果CustomForm想要测量JSX元素或编写内联CSS怎么办？怎么可能在CustomForm.state中存在JSX元素,但也有一个ref？我可以克隆元素并在CustomForm中保留一个虚拟DOM(带有引用),或者依赖基类来提供深度嵌套的安装ref后备.
2. 我认为从现有状态编写组件状态是不好的做法.如果CustomForm状态发生了变化,并且我想更改哪些行传递给BaseClass,我必须限制shouldComponentUpdate,重新声明该阶段文档(维护行对象引用),然后在总体集合上调用setState.this.state.stages.content[3].jsx是唯一改变的东西,但是当它看到props.stages改变时,我必须遍历BaseClass中每个阶段文档的每一行.

处理JSX集合有一些技巧吗？难道我做错了什么？这一切似乎过于复杂,我宁愿不通过遵循一些反模式来恶化问题.

自定义表格:

render () {
  return <BaseClass stages={this.stages()}/>
}

stages () {
  if (!this._stages) this._stages = { title: this.title(), content: this.content() };
  return this._stages;
}

title () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>A title document row</div>
    )
  }
}

content () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>Hello …

所以我试图创建我的第一个React应用程序，当我使用webpack对其进行编译时，我得到了一个相当大的JS文件，因为它包含了所有React，React-DOM等。

有什么办法可以使用众多React CDN之一并仍然使用

import React from "react";
import ReactDOM from "react-dom";

提前致谢！

我已经安装了@ types/react-dom以及typescript和@ types/react以及@ types/meteor但是当我尝试从命令行运行typechecker时我收到以下错误

您可以重现错误并在此处查看我的所有配置:https://github.com/Falieson/react15-meteor1.5

谢谢你的帮助!

$ meteor npm run type:client

> react-meteor-example@0.1.0 type:client /Users/sjcfmett/Private/ReactMeteorExample
> tslint -p ./tsconfig.json --type-check './client/**/*.{ts,tsx}'

Error at node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3422:13: Subsequent variable declarations must have the same type.  Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
Error at node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3423:13: Subsequent variable declarations must have the same type.  Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
Error at node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3424:13: Subsequent variable declarations …

在一个网站中,我有多个反应渲染元素.我想在这两个单独的元素之间传递数据.在两个元素之间传递数据的可能选项有哪些

ReactDOM.render(<Header/>, document.getElementById('header'));
ReactDOM.render(<SideBar/>, document.getElementById('sidebar'));

我希望在这些元素之间存储单个数据.就像我在一个组件中获取数据一样,我希望所有元素都可以访问这些数据(在所有ReactDOM中).那么可能的选择是什么呢？

编辑:由于要求我无法将它们合并到同一个根组件中.只有页面的某些部分处于反应中,其他部分仍在HTML/Jquery中.所以我在所需的div中单独渲染它们.

redux存储在不同的ReactDOM之间工作吗？

当这个 react 组件加载到网页中时，我在 IE 中遇到语法错误。有没有人遇到同样的问题？这是一个继承的包，来自node_modules的语法错误没有意义？

"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");

const wrapAnsi16 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${code + offset}m`;
};

const wrapAnsi256 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${38 + offset};5;${code}m`;
};

我正在学习 React 并试图更好地了解生命周期和不同阶段。

我刚刚读到的一件事是“React 首先渲染然后挂载元素。在这种情况下渲染意味着调用类的 render()，而不是绘制 DOM”

我想我只是不明白这意味着什么。有人可以用简单的方式或例子来解释它吗？

提前致谢！

我正在使用 React Native 编写应用程序。我正在使用世博会。

我的 React 和 react-dom 版本是 17.0.0，但我在博览会网页上收到了这样的错误。我该如何解决问题？

"react": "17.0.0", "react-dom": "17.0.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2 .tar.gz",

它显示如下：