Javascript 如何在React中呈现组件数组（字符串）？

加载页面时，我正在尝试呈现文本数组：

'values'：['hello'，'world']

但这给了我一个错误。在我的

formatoc.js

中，我有：

var props = {
    'name' : 'form',
    'timer' : 1500,
    'callback' : function(id, validity, value) {console.log(id, validity, value);},
    'values': ['hello', 'world'],
    'newParent' : new FormatOC.Parent({

        "one": {"__array__":"unique", "__type__":"string","__minimum__":1,"__maximum__":200,"__component__":"Input"}

    })

}

React.render(React.createElement(ParentComponent, props), document.getElementById('react-component'));

这是我的

Parent.jsx

文件中的内容：

定义（['react'，'r\u foc\u node']，函数（react，NodeComponent）{

var ParentComponent=React.createClass({
getInitialState:函数（）{
如果（！this.props.newParent）{
抛出“ParentComponent需要newParent属性”；
}
返回{
“值”：{}
}
},
递归：函数（级别）{
那=这个；
控制台日志（级别）；
用于（级别中的键）{
log（“这是一个键：”，keys）；
如果（（级别[键]的类型）=“对象”）{
if（级别[keys].constructor.name==“父级”）{
log（“我是家长”）；
级别=级别[键]。详细信息（）；
//log（级别[keys].get（[key_list[0]]）；
这个。递归（级别）；
//log（级别[keys].keys（））；
}否则{
log（“我是一个节点”）；
//console.log（级别[键]）；
};
};
}
},
childChange:函数（名称、有效值、值）{
this.state.values[name]=值；
this.setState（this.state）；
console.log（名称、值）；
//调用父回调
这个是.props.callback(
这个.props.name，
this.props.newParent.valid（this.state.values），
这是我的价值观
);
},
render:function（）{
var=这个；
var level=this.props；
返回(
{level.newParent.keys（）.map（函数（k）{
返回(
{（level.newParent.get（k.constructor.name==“Parent”）？
:
}
)
})
}
)
}

---

我不确定错误是否是因为我试图访问数组值的方式造成的？但我似乎无法呈现单词

hello

和

world

。

您使用的是：

level.newParent.keys（）.map（函数（k）{…

---

这应该是：

level.values.map（function（k）{…

它给了我一个错误，说

uncaughttypeerror:level.values.keys.map不是一个函数

。

'values'

应该在

newParent

中吗？如果它应该是

level.values.map（…）

.array没有

键

属性。哦，这很有意义。在Parent.jsx中的我的

return（）

中，它是

values={that.props.values[0]}

是否正确？您在哪里尝试渲染值？

var ParentComponent = React.createClass({

    getInitialState: function() {

        if(!this.props.newParent) {
            throw "ParentComponent requires newParent property";
        }

        return {
            "values": {}
        }
    },

    recursive : function(level) {

        that = this;

        console.log(level);

        for (keys in level) {
            console.log("This is a key: ", keys);

            if ((typeof level[keys]) === "object") {
                if (level[keys].constructor.name === "Parent") {
                    console.log('I am a parent');
                    level = level[keys].details();
                    //console.log(level[keys].get([key_list[0]]));
                    this.recursive(level);
                    //console.log(level[keys].keys());
                } else {
                    console.log('I am a node');
                    //console.log(level[keys]);
                };

            };

        }
    },

    childChange: function(name, valid, value) {

        this.state.values[name] = value;
        this.setState(this.state);

        console.log(name,value);


        // Call parent callback
        this.props.callback(
            this.props.name,
            this.props.newParent.valid(this.state.values),
            this.state.values
        );
    },

    render: function() {
        var that = this;

        var level = this.props;

        return (
            <div id = "form">
            {level.newParent.keys().map(function(k) {
                return (
                    <div>
                    {(level.newParent.get(k).constructor.name === "Parent") ?
                    <ParentComponent
                        name={k}
                        key={k}
                        timer={that.props.timer}
                        callback={that.childChange}
                        values={that.props.values[k]}
                        newParent={that.props.newParent.get(k)}
                    />
                    :
                    <NodeComponent
                        name={k}
                        key={that.props.name + '.' + k}
                        timer={that.props.timer}
                        callback={that.childChange}
                        values={that.props.values[k]}
                        newNode={that.props.newParent.get(k)}
                    />
                    }
                    </div>
                )
            })
            }
            </div>
        )
    }