更新反应组件而没有父组件在其之外

2024-02-28

如果组件没有父组件,我应该如何正确更新组件?

我找到了两种方法来做到这一点:

第一种方法 https://jsfiddle.net/69z2wepo/28597/

这里我通过改变组件的状态来更新组件:

var Hello = React.createClass({
  render: function() {
    if (!this.state) return null;
    return (
      <div>Hello {this.state.name}</div>
    );
  }
});


var component = ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);
component.setState({name: "World"});

setTimeout(function(){
  component.setState({name: "StackOverFlow"});
}, 1000);

第二种方法 https://jsfiddle.net/69z2wepo/28596/

这里我通过更新组件ReactDOM.render method:

var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
});


ReactDOM.render(
  <Hello name="world"/>,
    document.getElementById('container')
);

setTimeout(function(){
  ReactDOM.render(
    <Hello name="StackOverFlow"/>,
      document.getElementById('container')
  );

}, 1000);

那么哪种方法是正确的呢?或者也许这是第三个,correct way?


如果您只是想从组件外部触发重新渲染,则公开其forceUpdate方法。

初始的 ReactDOM.render 返回对组件的引用,您可以使用它:

const component = ReactDOM.render(<MyComponent />)

component.forceUpdate()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更新反应组件而没有父组件在其之外 的相关文章

  • 如何强制传单更新地图?

    当我将 Leaflet 与 React 一起使用时 我遇到了问题 据我研究 问题是 Leaflet 也想控制 DOM 渲染 现在 国家将使用与后端信息相对应的特定颜色代码 范围为1 gt 100 正确着色 但是 它每分钟更新一次 更新后 国
  • 如何正确使用Formik的setError方法? (反应库)

    我正在使用 React 与后端进行通信 现在尝试正确实现 Formik 表单库 主要问题 如何正确使用Formik的setError方法 客户端验证错误显示正确 但现在我尝试设置 显示后端验证错误 这些错误通过状态代码 400 的响应返回
  • React - 通过 css 模块全局使用 Bootstrap

    反应和所有这些东西都很新 所以我在这里需要一些帮助 我最近添加了https github com gajus babel plugin react css modules https github com gajus babel plugi
  • 获取自定义域以在 Github Pages 上使用 React

    我已遵循将自定义域定向到 Github 端和 DNS 端的 Github 项目页面的所有指南 该项目的 Github Pages 托管在自定义域之前可以正常工作 但现在要么不起作用 要么只是正常的 Github Pages 工作 但自定义域
  • Reactjs 中的嵌套注释

    我有以下 json comments id 1 comment text asdasdadasdsadsadadsa author adsfasdasdsad post id 1 ancestry null archived false c
  • 无法在react-native android中设置ShadowColor

    环境 环境 操作系统 macOS High Sierra 10 13 1 节点 8 9 1 纱线 0 17 10 npm 5 6 0 守望者 4 7 0 Xcode Xcode 9 2 内部版本 9C40b Android Studio 2
  • iOS 是否有像 Android 一样的应用内更新功能?

    我为 Android 和 iOS 开发了一个移动应用程序 现在每周我们都会发布 2 个更新 大多数时候 Android 和 iOS 用户会停止应用程序的自动更新 但是 如果有重要更新或错误修复或新功能 那么我们必须要求用户更新应用程序以获得
  • 在react-router转换期间我应该如何更新redux存储?

    我面临着如何在发生反应路由器转换时更新存储的问题 在我当前的实现中 如下 在渲染下一页之前更新存储 当当前页面根据下一页的数据获取商店更新时 就会出现问题 1 当前页面毫无意义地呈现 它订阅了商店更新 因为更新的商店是针对下一页的 2 当前
  • 按 T​​ab 键可关闭从子菜单打开的 Material UI 对话框

    我需要创建一个菜单栏 其中包含许多带有子菜单的菜单 当我从顶级菜单项打开对话框时 一切都会按预期 预期进行 但是当我从子菜单打开对话框时 按 Tab 键会关闭该对话框 我尝试了几种不同的方法来实现嵌套菜单 并选择了此处讨论的方法 https
  • 如何调用另一个组件中的方法并传递查询参数

    这是我的问题 我有一个下拉菜单 其中包含选项列表 选择一个选项后 将打开一个新选项卡 其中包含该特定选项的 Tableau 仪表板 由于我需要向后端发送查询字符串 Option ID 我该如何解决查询参数问题 这是我的下拉组件 import
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • React:如何从react-router-dom通过链接传递道具?

    我正在努力通过title从道具到我的Dishes组件使用但找不到解决方案 有什么建议么 import Link from react router dom const Category title gt return title expor
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • Material UI - 更改主题中的按钮文本颜色

    我在直接在 Material UI 主题中更改按钮文本颜色时遇到问题 更改主色 按钮字体大小效果很好 因此问题不在于传递主题 这是我的代码 import React from react import MuiThemeProvider cr
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 从回调中访问状态

    我在从回调访问组件状态时遇到问题 国家的价值num更改正确 但此类更改对于加载时定义的回调函数不可见 import React useState from react class MyObject callback gt void cons
  • 创建反应应用程序:npm 错误!解析“...”附近时 JSON 输入意外结束

    描述错误 npx create react app my app不适合我 我试过npm cache clean force但我一次又一次地遇到同样的错误 重现步骤 npm cache clean force npm npx create r
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component

随机推荐