将对象作为属性发送到反应组件

Question

I have the following Object

"RENDEROPTIONS":{
      "TYPE_NAME":{
         "single":true,
         "urlParams":{
            "ENTITYFIELD":"testt",
            "USERID":1
         },
         "labelClass":"control-label",
         "infiniteScrolling":true,
         "naDesc":"--Select--",
         "class":" entityParamsSelect",
         "value":"",
         "entityFieldRestrictions":false,
         "name":"eval_type_id",
         "validations":"required",
         "selectValues":"",
         "renderType":"select",
         "label":" Type",
         "keyField":"key",
         "selectDescriptions":"",
         "id":"eval_type_id",
         "descField":"value",
         "readOnly":false

}

and i want to send it as attributes to my react component.I tied to do it like this

<div>
                     <entity-render-field
                            <% _.each(renderOptions["TYPE_NAME"], function(value, key) { %>
                                <% if (typeof(value) !=="object") {%>
                                    <%= key%> = "<%=value%>"
                                <% } %>
                                <% if (typeof(value) ==="object") {%>
                                    <%= key%> = <%=JSON.parse(JSON.stringify(value))%>
                                <% } %>
                            <% });%>
                            >

                    </entity-render-field>
                </div>

but in the props the utlParams come as "[object" or ""[object", "object]" if i don't use the JSON.parse(JSON.stringify(value).Is there any way to send object as attributes to react component?

Answer 1

it is simple:

const RENDEROPTIONS = {
      TYPE_NAME: {
        single: true,
        urlParams: {
            ENTITYFIELD: "testt",
            USERID: 1
        },
        labelClass: "control-label",
        infiniteScrolling: true,
        naDesc: "--Select--",
        class: " entityParamsSelect",
        value: "",
        entityFieldRestrictions: false,
        name: "eval_type_id",
        validations: "required",
        selectValues: "",
        renderType: "select",
        label: " Type",
        keyField: "key",
        selectDescriptions: "",
        id: "eval_type_id",
        descField: "value",
        readOnly: false
      }
    };

  const Child = ({ obj }) => {
    console.log(obj);

    return (
        <div>
            <h1>Child</h1>
        </div>
    );

  const App = () => {
    return (
      <div className="App">                      
        <Child obj={RENDEROPTIONS} />            
      </div>
    );
  };
  export default App;