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

我需要为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'));

{v.title}

{v.description}

{v.date}

我考虑过创建mixin。然后，在

componentDidMount

事件中，将处理程序附加到具有

property

属性的所有元素。但我没有办法做到这一点

我的问题是：有没有办法遍历React构建的树？我注意到React开发者工具（Chrome扩展）可以做到这一点

类似的问题：

那么你想要：

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

然后在任何其他组件上都可以这样称呼它：

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

Stackoverflow

一种更专业，但也更困难的方法是redux表单实现，他们甚至使用它来生成HTML（我在上面的示例中使用if-else所做的）

如果需要访问其外部的任何数据，可以通过属性向其传递函数，或者将

MyField

组件连接到redux（redux表单也会这样做）

---

我还将通过道具传递您想要应用于

MyField

组件的任何特定一次性样式。

所以您需要一种方法来遍历父组件生成的子组件吗？在父级中，具有存储模型数组的状态。然后在渲染中，您可以使用

array.map

迭代数组中的每个模型，并返回一个子组件，该子组件传递事件处理程序和来自parent@trekforever糟糕的解决方案。有了它，我还需要一个模型——用于生成DOM节点的视图。我不明白你为什么要做你所描述的事情——也许进一步详细说明你到底想做什么，而这仅仅是用

数组实现不了的。map

？在我看来，你正在尝试做一些可以为你做的事情。。如果要遍历此组件的所有子级，只需使用

children

属性。IMO，更好的方法是在

componentDidMount

上的mixin中使用普通DOM方法，在这里可以说类似于

document.queryselectoral（'*[property]'）

（非jquery-ex）。不知道选择器是否正确..为什么要用jquery更改CSS而不是在CSS文件中使用

h1.someClass:hover{outline:1px solid red；}

？另外，我听说

contentEditable

不能很好地使用React，在继续之前，您可能想在这里阅读一下

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

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>