在react.js中渲染新元素onClick

2024-03-19

我是反应新手,正在尝试在单击时渲染一个新元素:

      var LoginButton = React.createClass({
       ..............
       ..............
      clickHandle : function() {
        this.rememberMe = {
            active: localforage.getItem('rememberMe', function (err, key) {
                return key;
            })
        };
        if (this.rememberMe.active == true || this.rememberMe.active == 'checked')
        {
            document.getElementById('loginForm').submit();
        }
        else {
            React.render(<wantToRemember />, document.getElementById('loginbuttonhere'));
        }
        return this.rememberMe.active;

    },

这是应该出现的元素:

var wantToRemember = React.createClass({
        getInitialState : function () {
            return {
                position: 'absolute',
                display: 'block',
                top: '20px',
                width: '100px',
                height: '100px'
            }
        },

        render : function () {
            return (
                    <div className="rememberPopup" style={this.state}>
                        <div className="row">
                            <div className="staylogin">
                                <div className="col-md-4">
                                    <label for="checkbox">Angemeldet bleiben</label>
                                </div>
                                <div className="col-md-1">
                                    <input type="checkbox" id="checkbox" name="remember" />
                                    </div>
                                </div>
                            </div>
                    </div>
            );
        }
    });

但它没有出现,而是 React 渲染了这个 html:

<wanttoremember data-reactid=".1"></wanttoremember>

我很确定我做错了一些非常基本的事情,但不知道是什么。难道不能像这样调用不同的元素吗?


Your react.js组件名称以小写字母开头,它应该以大写字母开头:var WantToRemember = React.createClass(...) and React.render(<WantToRemember />,....

JSX 编译器要求组件名称以大写字母开头(请参阅jsx 文档对此 https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components):

要渲染 React 组件,只需创建一个以大写字母开头的局部变量:

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.getElementById('example'));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在react.js中渲染新元素onClick 的相关文章

随机推荐

  • Visual Studio 链接器警告 LNK4098

    我有一个 dll 项目 在发布配置中构建该项目时 我收到以下警告 MSVCRT lib cinitexe obj 警告 LNK4098 默认库 msvcrtd lib 与其他库的使用冲突 使用 NODEFAULTLIB 库 这只是一个警告
  • C# linq 支持“反连接”语义吗?

    我用谷歌搜索了一段时间 没有找到直接的反连接语义示例 以 C LINQ 为例 如何做到这一点 An 反连接基本上 一组不包含在另一组数据中的数据可以表示为Linq与一个IEnumerable Except像这样 double numbers
  • pod install 给出与 ruby​​ gems 和 libffi 相关的错误

    我使用react native init 创建一个应用程序 并在iOS 文件夹中运行pod install 但是 我收到以下错误 System Library Frameworks Ruby framework Versions 2 6 u
  • 在使用 Rails 保存之前将字符串转换为日期

    对 Ruby 很陌生 我已经被困了好几个小时了 到处寻找也找不到答案 所以我使用 Rails gem 的引导日期选择器 因为我更改了日期选择器的日期格式 所以它不会存储在数据库中 猜测这是因为 simple form 输入被用作字符串 以避
  • 如何使用 ajax 请求发送 Twitter OAuth 访问令牌?

    我想在使用 OAuth 通过 用 twitter 签名 进行身份验证后加载用户的主页时间线 我正在使用这个库来处理身份验证部分https github com jmathai twitter async https github com j
  • 登录 WordPress 网站时如何显示用户的用户名?

    当用户登录到我的 WordPress 网站时 我希望我的网站标题显示 登录身份 我不知道如何回显当前用户的用户名 这是我得到的代码
  • 改变python shell的背景颜色

    例如 是否可以将 Python Shell 的背景颜色从白色更改为黑色 我确实找到了如何更改文本颜色 但不知道如何更改背景颜色 我是在Windows下运行的 有什么建议么 如果您指的是 IDLE 我通过此链接执行了这个简单的步骤 适用于 u
  • 使用列表理解在列表元素前面添加前缀

    有一个这样的列表 foo spam bar 使用列表理解是否可以获取此列表作为结果 foo ok foo spam ok spam bar ok bar In 67 alist foo spam bar In 70 prefix elt f
  • 如何使用 JavaScript 打开新选项卡/窗口?

    客观的 我想在新选项卡 窗口中打开 URLEXACT与 target blank 相同的方式 Code 我正在使用触发以下 JavaScript 的 PHP 条件 我的问题 window open 是不一样作为 target blank 超
  • 为什么 Java 源文件要进入目录结构?

    假设我正在创建一个包含以下类的 Java 项目 com bharani ClassOne com bharani ClassTwo com bharani helper HelperOne com bharani helper suppor
  • 如何从泽西岛 1.0 迁移到泽西岛 2.0?

    我正在尝试升级到 Jersey 2 0 但遇到了很多麻烦 因为 Jersey 的 groupIds 和artifactIds 已完全更改 并且我在 中找不到迁移计划泽西岛文档 https jersey java net nonav docu
  • Google Play 商店的 RSS 源

    Apple 应用程序商店为您提供 RSS 源 以便将提交到应用程序商店的最新应用程序发送到您最喜欢的源阅读器中 我想知道 google play 商店是否也有 RSS feed 可以让你做同样的事情 Thanks 不 他们不提供任何供第三方
  • 您能否提供一些与在项目中使用的人工智能相关的主题想法? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • scala slick 一对多集合

    我有一个数据库 其中包含具有一对多注册关系的活动 目标是获取所有活动及其注册列表 通过创建带有注册的活动的笛卡尔积 获取该数据所需的所有数据都已存在 但我似乎找不到一个好的方法来将它正确地放入 scala 集合中 让我们输入 Seq Act
  • 如何为来自react js中的api的动态表单字段设置常规onchange?

    我正在使用 React 中的表单 我面临的挑战是每当我为输入字段设置 onchange 处理程序时 它都会更改我拥有的所有输入字段的值 表单输入字段已映射并且来自 api 我想要的是一个通用的更改处理程序来管理所有输入字段 import R
  • Spring boot中如何配置gson?

    Spring Boot 2 在application yml中 http converters preferred json mapper gson 现在我用自定义设置编写类Gson public class GsonUtil public
  • 在 QML 中获取 $HOME 和/或用户名

    我需要知道如何获取用户的用户名和 或主目录 我用 google 搜索了一段时间 但只能找到 C 或 BASH 的变量 如何获取用户名或主目录 我正在用 QML 写作 这就是我的实现方式 Qml环境变量 h ifndef QMLENVIRON
  • C#5 ReadAsync 和迭代器

    我正在尝试将下面的类转换为延迟返回文件 public class ObservableFile2 IObservable
  • java.lang.IllegalArgumentException:端口超出范围:67001

    我在运行脚本时遇到以下错误 该脚本正在尝试调用 Web 服务 并且成功调用了 Web 服务 最后 它也打印了成功的消息 只是在中间抛出了一些带有 LOG UTILS 的错误 请大家看看并提出建议 java lang IllegalArgum
  • 在react.js中渲染新元素onClick

    我是反应新手 正在尝试在单击时渲染一个新元素 var LoginButton React createClass clickHandle function this rememberMe active localforage getItem