问题标签 [react-component]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 如何将数据与多个根组件分开?
我正在使用 React.js 构建我的整个网站,如下所示:
但是,在我的一个数据保存组件(即 MainFlow 或 AddElementWrapper)上调用 setProperties 时,我收到一个错误,指出我应该通过它们的父级操作数据。
首先:我认为只有当我要操作的组件有另一个所有者时,这才会成为问题。但是,我的组件没有 React 组件作为owner,只有 HTML 元素作为parents。
我可以通过将所有应用程序数据附加到单个根组件来规避这个问题。但是,我想将某些数据集分开。有办法吗?
reactjs - React.JS Ref 中的 Ref 错误 - createRef、useRef 和 using Refs
我正在尝试ref
使用 React 使用该属性。我的浏览器出现一个奇怪的错误,我无法弄清楚问题所在。谁能向我解释为什么我会收到此错误:
错误:不变违规:addComponentAsRefTo(...):只有 ReactOwner 可以有 refs。这通常意味着您正在尝试将 ref 添加到没有所有者的组件(即不是在另一个组件的
render
方法中创建的)。尝试在一个新的顶级组件中渲染这个组件,该组件将保存 ref。
当我有这个代码时:
javascript - 如何在 JSX 中添加自定义 html 属性
背后有不同的原因,但我想知道如何简单地将自定义属性添加到 JSX 中的元素?
reactjs - 如果没有 shouldComponentUpdate,React 0.14 的无状态组件将如何提供性能改进?
自从我阅读 React 0.14 的发行说明(和其他相关炒作)以来,这个问题一直在我脑海中转来转去——我是 React 的忠实粉丝,我认为无状态组件(https://facebook.github。 io/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components)是一个很好的主意,无论是为了便于编写此类组件,还是为了在代码中表达这些组件的意图对于相同的道具数据,组件应该是“纯”的。
问题是:React 怎么可能优化这些无状态的组件功能,而无需全力以赴并假设 props 引用不仅是不可变的,因为它们不应该在组件内被操纵,而且它们永远不会改变在组件生命周期之外?“常规”组件(也称为有状态组件——换句话说,贯穿整个生命周期的组件;componentWillMount、getInitialState 等)具有可选的“shouldComponentUpdate”函数的原因是 React没有假设所有的 props 和 state 引用都是完全不可变的。渲染组件后,props 引用的某些属性可能会发生变化,因此相同的“props”实例稍后可能具有不同的内容。这就是为什么人们对使用完全不可变的结构有很多兴奋的部分原因,以及为什么有人说将 Om 与 React 结合使用可以提供巨大的性能提升;因为那里使用的不可变结构保证了任何对象的任何给定实例永远不会被改变,所以 shouldComponentUpdate 可以对 props 和 state 执行非常便宜的引用相等检查(http://swannodette.github.io/2013/12/17/the -future-of-javascript-mvcs/)。
我一直在尝试找到有关此的更多信息,但一无所获。如果不假设 props 数据将由不可变类型组成,我无法想象围绕无状态组件可以做出哪些性能改进。也许对非不可变 props 类型进行一些初步分析,以尝试猜测“props”和“nextProps”是否代表相同的数据?
我只是想知道是否有人对此有任何内幕消息或其他一些启发性的见解。如果 React确实开始要求 props 类型是“完全不可变的”(允许引用相等比较以确认数据没有改变),那么我认为这将是一个很大的进步,但它也可能是一个很大的变化。
reactjs - 在 ReactJS 中,我可以多次显示 SAME 组件吗?
考虑到我有一个数据列表。
每行包含一个用户名列。
用户名列包含一个用户名反应组件。
UserName 组件在其 componentDidMount() 中执行 ajax 请求以从 HTTP GET 获取实际用户名。
多行将包含相同的用户名。
我遇到的问题是,如何为每个唯一的用户名只发送一个 ajax 请求?
当前发生的是每个 UserName 组件都发送自己的 ajax 请求以从 HTTP GET 获取用户名。
请注意,我不使用 redux,所以这不是解决方案。
谢谢
reactjs - 什么是 React 受控组件和不受控组件?
ReactJS 中的受控组件和非受控组件是什么?它们彼此有何不同?
javascript - React - 不变违规异常
作为 React 的新手,我被一些看似非常简单的东西所困扰。不知道做错了什么。
我有一个像这样的组件BasicReactComponent.js:
我试图在我的主文件中调用它,如下所示:
我不断收到以下错误
javascript - 更改 React 状态的最佳方法基于子组件的级别
我有一个具有顶级<App />
组件的 React 应用程序(从 create-react-app 开始构建)。我的顶级组件看起来像这样:
(routes
是 { component:, to: } 个对象的数组)。渲染的每个组件都<Route>
使用一个名为的子组件<Page>
,我在其中设置标题并包装一些内容:
有时页面可能会使用不同的主题,我想<Header />
在查看该页面时应用该主题:
我要做的是在渲染每个组件时更改appTitle
和theme
状态。<App />
做这个的最好方式是什么?使用 React 的生命周期钩子之一?改变“顶级”状态的其他方法?如果是这样,我如何通过react-router<Route>
组件将操作传递给这些组件?
javascript - React Native 库开发与使用
我在 React Native 中开发应用程序,我需要构建自己的库并在多个 React Native 项目中重用它们。使用 React Native 我无法从项目外部链接库,因此我不能简单地将我的库链接到我的所有 React Native 应用程序。这样做的正确方法是什么?
我需要一个开发环境来开发和测试我的库,但我还需要在我需要的所有项目中导入我的库。