Proper state management for unmounted JSX strings?

Question

We have a crazy DOM hierarchy, and we passed the JSX in the details, rather than embedding the children. We want the base class to determine which documents are shown by children, and which children are docked or attached to the top of the document window associated with them.

• List (crazy physics writes inline styles in shells of the base class)
  • Custom form (passes JSX class strings to Base)
    • Base class (connects to the list)
  • Custom form (passes JSX strings to the base class)
    • Base class (connects to the list)

---

The problem is that we are passing deeply nested JSX, and state management / access to refs on the form is a nightmare.

I don’t want to re-declare every line every time, because these lines have an extra state attached to them in the base class, and the base class needs to know which lines really changed. This is pretty easy if I don't update the rows.

---

I don’t know how to actually deal with JSX strings in user form.

• Refs can only be added to a subroutine render(). What if CustomForm wants to measure a JSX element or write inline CSS? How does this JSX element exist in CustomForm.state, but also has ref? I could cloneElement and save the virtual DOM (with refs) inside CustomForm or depend on the base class to feed deeply nested, mounted refbackwards.
• . CustomForm , , BaseClass, shouldComponentUpdate, ( ), setState . this.state.stages.content[3].jsx - , , BaseClass, , props.stages .

---

JSX? - ? , , -.

---

:

render () {
  return <BaseClass stages={this.stages()}/>
}

stages () {
  if (!this._stages) this._stages = { title: this.title(), content: this.content() };
  return this._stages;
}

title () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>A title document row</div>
    )
  }
}

content () {
  return [{
    canBeDocked: false,
    jsx: (
      <div>Hello World</div>
    )
  }, {
    canBeDocked: true,
    jsx: (
      <div>Yay</div>
    )
  }
}

Answer 1

, - , ( templateForChild).

constructor (props) {
  super(props);

  // --- can't include refs --->
  // --- not subroutine of render --->
  this.state = {
    templateForChild: [
      <SomeComponentInstance className='hello' />,
      <AnotherComponentInstance className='world' />,
    ],
  };
}

componentDidMount () {
  this.setState({
    templateForChild: [ <div className='sometimes' /> ],
  }); // no refs for additional managing in this class
}

render () {
  return ( <OtherManagerComponent content={this.state.templateForChild} /> );
}

• , ref, , , , React . , CustomForm, BaseClass ref ( props.ref)

• , , key createFragment. , . , - , . , key, ref, DOM node ( findDOMNode(ref), !(ref instanceof HTMLElement).

Answer 2

, , Redux. .

React, : Redux

Answer 3

@t1gor. REDUX. . , 10 ( , , , .., .., ) , , ,

...

• ( ) -
  • ( ) -
    • ( ) -
      • ( var) - .

...

• ( ) -
  • • • The great grandson - also reads the same citizens of the state level, without passing ...

Typically, the code looks something like this:

'use strict'

//Importation of Connection Tools & View
import { connect } from 'react-redux';
import AppView from './AppView';


//Mapping -----------------------------------

const mapStateToProps = state => {
    return {
        someStateVar: state.something.capturedInState,
    };
}

const mapDispatchToProps = dispatch => {
    return {
        customFunctionsYouCreate: () => {
            //do something!
            //In your view component, access this by calling this.props.customFunctionsYouCreate
        },
    };
}

//Send Mappings to View...
export default connect(mapStateToProps, mapDispatchToProps)(AppView);

In short, you can store all the elements of the state level of the global application in something called storage, and whenever even the smallest component needs something from the state of the application, it can receive it when a view is created instead of being transferred.