Geek Answers Handbook

ReactJS data stream with deep hierarchical data

I am learning ReactJS and trying to understand the basic concepts. I started creating a prototype of the application I'm working on and has the following hierarchy

  • Customer
    • Location
      • The address
      • Contacts

The page I'm working on will be an input form for the Client and all his siblings. Each of these sections will have some text inputs for placing data, so they looked like a natural place to place a hierarchy of components.

From all that I read about ReactJS, if you are going to manage state, you should do it in the general ancestor of all controls. This means that any changes in the child must bubble an event before the state custodian to handle the changes. Then this should update the state and any changes will be re-displayed. This makes sense in simple scenarios, but it leads me to my slightly more complex hierarchy.

  • If any change occurs in one of many Addresses, should I release this event in place and then on the Client?
  • If so, what is the best way to tell the state which particular address has changed?
  • If you need to go through each level of the hierarchy, can it not do a lot of additional template to spread a simple change?
  • onChange , ?

ReactLink (https://facebook.imtqy.com/react/docs/two-way-binding-helpers.html) , . , , . , , . , React , .

+4
2

- React . :

var Parent = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {
            p: 'Hello World',
            q: 'Click me if I\'m pink!',
            r: 'A'
        };
    },
    render: function() {
        return (
            <div className='parent'>
                <p>
                    <h3>Parent</h3>
                    <tt>
                        p: {this.state.p}<br />
                        q: {this.state.q}<br />
                        r: {this.state.r}
                    </tt>
                </p>

                <Child q = {this.linkState('q')}
                       p = {this.linkState('p')}
                       r = {this.linkState('r')} />
            </div>
        );
    }
});
var Child = React.createClass({
    clicked: function() {
        this.props.q.requestChange("Thank you :)");
    },
    render: function() {
        return (
            <div className='child'>
                <h3>Child</h3>

                <p>
                    <input valueLink={this.props.p} />
                </p>

                <p>
                    <tt onClick={this.clicked}>
                        {this.props.q.value}
                    </tt>
                </p>

                <select valueLink={this.props.r}>
                    <option value={'A'}>A</option>
                    <option value={'B'}>B</option>
                </select>
            </div>
        );
    }
});

React.render(<Parent />, document.body)

https://jsfiddle.net/cachvico/p81s75x5/

- , !

+1

, , .

"" 4-5 , ().

:

<ProjectContainer>
  <ProjectComponent onProjectChange onProjectTaskChange onCommentChange>
    <ProjectTasksComponent onProjectTaskChange onCommentChange>
      <ProjectTaskComponent onProjectTaskChange onCommentChange>
        <ProjectTaskCommentsComponent onCommentChange>
          <ProjectTaskCommentComponent onCommentChange>
Hide result
0

More articles:


All Articles