如何在这个复杂的例子中"思考React"？

Question

提前道歉,这可能不是一个正确的解决方案类型的问题,但我不知道如何将其分解为更简单的部分或其他问题.

我在弥补在线可用的更琐碎的反应样本/演示与如何"思考反应"更复杂的应用程序之间的差距方面遇到了一些麻烦.

我有一个预先存在的解决方案,用于使用Meteor和一堆jquery构建的东西.这有点hacky,如果我能弄清楚如何,我认为将是React重构的好人选.

它看起来像这样:

如果我首先将其分解为组件层次结构,我会得到如下内容:

• 紫色 - 用户可编辑的HTML内容容器.用户可以通过WYSIWYG编辑器编辑容器中的任何html.
• 黄色 - 在html容器中,每个html的顶级块... p,列表,img被赋予唯一的ID - 因为WYSIWYG编辑器这些可能无法成为Purle的子组件
• 绿色 - 渲染标记但最初对每个块都不可见.将鼠标悬停在一个块上或一个标记上会显示与该块相关联的标记.单击标记将开始添加操作的过程.如果块已经附加了一个线程,则立即渲染标记+计数(根据标记中的1).标记都包含在红色中
• 海泡绿色 - 操作是单击标记并保存线程时添加的操作
• 蓝色 - 所有这一切的容器,称其为缺少更好名称的条目

现在,我的反应思维能力分崩离析.每个组件似乎与其他组件具有非常严重的相互依赖性.

标记看起来像是最好的作为自己的组件,但它们的状态更多地受到内部其他组件的控制.

• 编辑HTML内容是通过编辑器完成的,该编辑器依赖于容器中的所有HTML是一个字符串,因此这些块实际上不能分解为单独的组件.
• 将鼠标悬停在内容块上会显示/隐藏标记,以便内容区域上的事件影响标记组件的状态.事件处于HTML块级别,尽管这些事件不一定是单独的组件
• 每个标记的存在与内容HTML区域中的内容块的数量严格相关
• 每个标记是否具有与之关联的Action与Actions集合严格相关
• 标记的正确定位取决于内容的呈现和/或重新调整大小的方式
• 单击标记会更改Action组件的状态,而反之亦然,(取消/删除和Action会更改标记的状态).

你会如何通过这种复杂性的例子来"思考反应"？任何帮助或建议将不胜感激.

Answer 1

我读过你的例子,我不完全确定它是如何工作的,所以我只是试着回答你的问题并从你的示例应用程序中提取一些具体的例子.

现在,我的反应思维能力分崩离析.每个组件似乎与其他组件具有非常严重的相互依赖性.

因此,反应的基本概念是尽可能地保留东西作为道具,如果你有需要由多个组件共享的状态,你需要将状态抽象给它们之上的父(或祖父). .如果他们没有合适的父级来弥补这一差距,您可以创建另一个包含此状态的组件,并将它们都作为子级.如果你正在创建的树太大,这就是使用flux来解决其中一些问题的地方,但是我不会在这里讨论这个问题,因为使用React这样的事情可能更容易,并从那里学习它直到你体验痛点.

例如,如果绿松石动作/线程组件受到标记点击的影响,则需要父级保持其上方的状态.

标记看起来像是最好的作为自己的组件,但它们的状态更多地受到内部其他组件的控制.

它们应该是它们自己的组件,并且可能是文本块的子组件.文本组件将采用支柱,以允许它确定是否显示这些块.

一般建议

我认为通常最简单的尝试和建模的方法是从底部开始逐渐开始.从一切静态开始,一切都作为道具,当你开始需要交互时,你可以开始应用状态,并在构建组件并将子组件中的"状态"转换为道具时逐渐移动该状态.只有这样我才能开始明白你的国家需要在哪里.

一些伪代码

我写了一些伪Javascript代码来直观地了解我将如何开始构建应用程序的这一部分.它不会做任何事情,但希望它会帮助你想象我的意思.如果你跟着它,ParentWithState并通过渲染功能向孩子工作,Marker希望你会明白我的意思.

var Marker = React.createClass({
  render: function() {
    return (
      <div className="marker" onClick={this.props.handleMarkerEvent}>
        +
      </div>
    )
  }
})

var TextBlock = React.createClass({
  var markerData = this.props.markerData;
  var marker = null;

  //do some logic with markerData

  if(markerData.show === true){
    marker = <Marker handleMarkerEvent={this.props.handleMarkerEvent}>
  }

  render: function(){
    return (
      <div className="textBlock">
        {this.text}
        {marker}
      </div>
    )
  }
});

var Actions = React.createClass({
  render: function(){
    <div className="actions">
      //some code to display the actions
    </div>
  }
})

var ParentWithState = React.createClass({
  getInitialState: function(){
    return {
      textBlockData: [
        //textBlock data objects
      ],
      //put all the data you need for the app here 
    }
  },

  handleMarkerEvent: function(){
    //do some stuff when marker is clicked
    //change state which will propagate down
  },

  render: function() {
    var textBlocks = this.state.textBlockData.map(function(textBlock){
      return (
        <TextBlock text={textBlock.text} markerData={textBlock.markerData} markerEvent={this.handleMarkerEvent}>
      )
    })

    return (
      <div>
        <div className="text-blocks">
          {textBlocks}
        </div>
        <Actions />
      </div>
    )
  }
});

我在这里提到的最后一件事,因为Marker组件有一个影响其祖父母的状态的函数,我将在ParentWithState组件中创建事件处理程序,然后将其作为道具传递下来,然后最终在孩子中我将会使用onClick处理程序调用它,但实际上它是控制此函数的父级