Question

我正在玩Reactjs，我想知道我是否过多地分解了我的组件。

 <script type="text/babel">

class MainCompoent extends React.Component {
      constructor() {
          super();
          this.state = { 
                items : [
                            {
                                name: 'Test 1',
                                type: { value: "1"},
                                types: [
                                          { value: "2"},
                                          { value: "1}
                                      ]
                            },
                            {
                                name: 'Test 2',
                                type: { value: "1"},
                                types: [
                                          { value: "2"},
                                          { value: "1}
                                      ]
                            },
                          ]
                };
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="item-container"> 
                {
                      this.state.items.map((item, i) => {
                          return <Item item={item} index={i} />
                      })
                }
              </div>
          )
      }
    }

class Item extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="item"> 
                    <General item={this.props.item} index={this.props.index}  />
                    <Specific1 />
                    <Specific2 />
              </div>
          )
      }
    }

class Specific1 extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="Specific1-container"> 
                   <h1>Specific1 Container </h1>
              </div>
          )
      }
    }

  class General extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      handleChange(event) {
        this.props.handleChange(event.target.value, this.props.index);
      } 
      handleChange2(event) {
        this.props.handleChange2(event, this.props.index);
      }  
      render() {
          return (
              <div className="general-container"> 
                   <h1>General Container </h1>
                  <div>
                    <label>Name</label>
                    <input type="text" value={this.props.item.name}/>
                  </div>
                  <div>
                    <label>Type </label>
                    <select value={this.props.item.type.value} onChange={(event) => this.handleChange(event)}>
                        {
                          this.props.item.types.map((type, i) => {
                              return <option key={'type-' + i}  value={type.value} >{type.value}</option>;
                          })
                        }
                    </select>
                  </div>
              </div>
          )
      }
    }


  class Specific2 extends React.Component {
      constructor() {
          super();
      }
      componentDidMount() {
      }
      render() {
          return (
              <div className="specific2-container"> 
                   <h1>Specific2 Container </h1>
              </div>
          )
      }
    }

  ReactDOM.render(<MainCompoent />, document.getElementById("Container"));
 </script>

上面的代码我删除了我认为不必要的所有内容。我试图在没有助焊剂或还原剂的情况下做到这一点。

在Item容器中，有3个组件一起呈现。将永远显示将军，但其他2人中只有1人将被展示（尽管我的名字相似，但他们是不同的，必须是2个独立的组成部分）。所有3个组件都共享属性，因此我将状态置于顶部并将其传递下去。

但有一件事是，当我必须更新这个状态时，我可能需要上升2个父母（即来自General的handelChange必须转到Item，而必须转到MainComponent来更新状态）。

这不好吗？

Answer 1

我堆积了类似的问题，并向我自己发现了一个非常简单的答案。这一切都取决于您需要什么级别的抽象。

EG。如果Item组件在没有General的情况下无法“生效”，那么更好的方法是将General包含到Item。如果他们完全独立，那么你可以简单地保持General props-API稳定并改变自己。

将道具传递给父级是可以的，但更好的方法是保留一个source of truth。如果您不想使用任何数据流库（redux，flux，whteverx），那么只需将Root组件设为最聪明的组件即可。让它来控制app-state的变化。

这是一个很好的“指南”如何让React组件相互通信（https://facebook.github.io/react/docs/lifting-state-up.html）。通过道具Parent到Child，通过回调Child到Parent。

我的Reactjs组件太精细了吗？

1 个答案: