javascript - 有没有办法遍历 React 构建的树？

coder 2024-07-20 原文

我需要为 HTML 页面构建一个可视化编辑器。 ReactJS 似乎是一个不错的选择。目前我面临以下问题:

我对我的数据建模:

var Model = {
    title: 'Hello',
    description: 'Pellentesque eleifend urna ac purus tempus...',
    date: new Date().toString()
};

并构建了将其数据存储在上述结构中的组件:

var App = React.createClass({
    getInitialState: function () {
        return {
            value: Model
        }
    },
    handleMouseEnter: function (event) {
        $(event.target).css('outline', '1px solid red').attr('contenteditable', true);
    },
    handleMouseLeave: function (event) {
        var t = $(event.target), v = this.state.value;
        t.css('outline', 'none').attr('contenteditable', false);
        v[t.attr('property')] = t.text();
        this.setState({value: v});
    },
    render: function () {
        var v = this.state.value;
        return (
            <div>
                <pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre>
                <h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1>
                <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="description">{v.description}</p>
                <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="date">{v.date}</p>
            </div>
        );
    }
});

React.renderComponent(<App />, document.getElementById('app'));

在那种特殊情况下它有效。但我想摆脱 onMouseEnter 和 onMouseLeave 属性，只保留 property 字段。像那样:

<pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre>
<h1 property="title">{v.title}</h1>
<p property="description">{v.description}</p>
<p property="date">{v.date}</p>

我考虑过创建 mixin。然后，在 componentDidMount 事件中，将处理程序附加到具有 property 属性的所有元素。但我找不到实现这一目标的方法。

我的问题是:有没有办法遍历 React 构建的树？我注意到 React 开发人员工具(Chrome 扩展)可以做到这一点。

类似问题:React.js component creating parent child relations and iterating

最佳答案

所以你想要:

<h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1>

作为

<h1 property="title">{v.title}</h1>

我会为此使用另一个 Component，它负责渲染特定类型的组件，例如 redux-form

实现您想要做的事情的最简单方法如下:

class MyField extends Component {
  constructor(props) { 
    super(props); 
    this.handleMouseEnter = this.handleMouseEnter.bind(this); 
  }
  handleMouseEnter() { ... }
  render() {
    const { property, children } = this.props;
    if (property === 'title') {
      return (
        <h1 onMouseEnter...>{children}</h1>
      );
    }
  }
}

然后你可以在任何其他组件上这样调用它:

<MyField property="title">Stackoverflow</MyField>

一种更专业但也更困难的方法是 Field 的 redux 形式实现, 他们甚至在上面使用 React.createElement生成 HTML(我在上面的例子中用 if-else 做了什么)。

如果您需要在它之外访问它的任何数据，您可以通过属性将其传递给它一个函数，或者将 MyField 组件连接到 redux(redux-form 也这样做)。

我还会通过 props 传递您想要应用于 MyField 组件的任何特定的一次性样式。

关于javascript - 有没有办法遍历 React 构建的树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26531864/

有关javascript - 有没有办法遍历 React 构建的树？的更多相关文章

ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2
我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？最佳答案表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/
ruby-on-rails - rails 目前在重启后没有安装 - 2
我有一个奇怪的问题:我在rvm上安装了rubyonrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
没有类的 Ruby 方法？ - 2
大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。关于没有类的Ruby方法？，我们在StackOverflow
ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2
我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
ruby - 没有类方法获取 Ruby 类名 - 2
如何在Ruby中获取BasicObject实例的类名？例如，假设我有这个:classMyObjectSystem我怎样才能使这段代码成功？编辑:我发现Object的实例方法class被定义为returnrb_class_real(CLASS_OF(obj));。有什么方法可以从Ruby中使用它？最佳答案我花了一些时间研究irb并想出了这个:classBasicObjectdefclassklass=class这将为任何从BasicObject继承的对象提供一个#class您可以调用的方法。编辑评论中要求的进一步解释:假设你有对象
ruby - 在 Ruby 中构建长字符串的简洁方法 - 2
在编写Ruby(客户端脚本)时，我看到了三种构建更长字符串的方法，包括行尾，所有这些对我来说“闻起来”有点难看。有没有更干净、更好的方法？变量递增。ifrender_quote?quote="NowthatthereistheTec-9,acrappyspraygunfromSouthMiami."quote+="ThisgunisadvertisedasthemostpopularguninAmericancrime.Doyoubelievethatshit?"quote+="Itactuallysaysthatinthelittlebookthatcomeswithit:themo
ruby - 没有轨道的 ActiveRecord 时区 - 2
我在非Rails项目中使用ActiveRecord。在Rails中，我可以这样做:config.time_zone='EasternTime(US&Canada)'config.active_record.default_timezone='EasternTime(US&Canada)'但如果我不使用rails，我该如何设置时区？最佳答案 ActiveRecord::Base.default_timezone='EasternTime(US&Canada)' 关于ruby-没有轨道的A

javascript - 有没有办法遍历 React 构建的树？

有关javascript - 有没有办法遍历 React 构建的树？的更多相关文章

随机推荐