Ad

How To Use The Component String Returned From Server In React Via AJAX

- 1 answer

All:

I am pretty new to React, I am trying to render a component from the string return by Server side ReactDomServer.renderToString(), could anyone give me a working patrn or example to do this in AJAX?

A case will be:

One the init page, there is a dropdown, you choose different type of componnet, then it will submit AJAX request to server, then server return according string, then the page will render that component on it.

Thanks

Ad

Answer

From the comments on your question, it sounds like what you're looking to do is dynamically render a UI.

Your request was for an example of a drag-and-drop rendering workflow, but that would stray too far from your question. It's important that we first tease out the many components and then focus on the one that's interesting for this question. We have a data layer and server-side responsible for storing information, business logic for determining how components should render where and when, interaction paradigms like drag and drop that work within these rules, and the rendering of components based on them.

All of these are separate concerns that must be considered independently. For example, drag and drop is one way to add components, but it is likely to not be the only way, so why couple the two? That leaves us with just rendering dynamic components, which I shall consider here. I'll be using ES2015 syntax to make the code cleaner.

First, we have a main component that does the wrapping:

const Renderer = React.createClass({
  render () {
    // ...
  },
});

ReactDOM.render(
  <Renderer layout={layout} />,
  document.getElementById( 'app' )
);

Now let's consider the components you mentioned, which will be pure:

const Button = ({ text }) => (
  <button>{text}</button>
);

const Input = ({ type = "text", placeholder }) => (
  <input type={type} placeholder={placeholder} />
);

And some container for available components (which would likely also have metadata and rules about each):

const Components = {
  Button,
  Input,
};

And now let's assume we have a configuration defined in json:

{
  "name": "My Interface",
  "layout": [
    { "id": 123, "component": "Input", "placeholder": "keywords..." },
    { "id": 456, "component": "Button", "value": "Search!" },
  ],
}

This is highly simplified, but you can imagine this document showing all properties for a deeply nested UI, perhaps sporting different types of containers like rows and columns. Now we can assume the JSON property layout is the layout property passed to the Renderer above. Now our render function can look like this (highly simplified):

render () {
  const children = this.props.layout.map( ({ component, ...props }) => {
    const Component = Components[ component ];
    return <Component {...props} />
  });

  return (
    <div className="component-view">
      {children}
    </div>
  );
}

Whenever the model changes, we would re-render the component tree and see what we should. There is a lot that would have to go into something like this to get a full UI editor - that's a massive undertaking. But with proper design principles and separation of concerns, it's at least doable.

To return to drag and drop briefly, if we were to drag and drop, we would note its place and insert the component into the tree however made sense based on the component and the state of the item onto which it's dropped, etc. The result of the operation, assuming it was successful, would be a mutated layout tree, which triggers a re-render.

Note: I completely ignored performance considerations.

Ad
source: stackoverflow.com
Ad