將對象作為屬性發送到反應組件

Question

我有以下對象

"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

}

我想將它作為屬性發送到我的反應組件。我像這樣做

<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>

但是在道具中，如果我不使用 JSON.parse(JSON.stringify(value)，則 utlParams 將作為“[object”或“”[object”，“object]”出現。有沒有辦法將對象作為屬性發送反應組件？

Answer 1

很簡單：

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;