Question

Box.expandBox(id);


var Box= (function(){
   return {
    expandBox: function(id) {
        console.log('inside expandBox: ' + id);
        ReactDOM.render( React.createElement(this.pBox(id)), document.getElementById('activate'))
    },
    pBox: function(id) {    
        console.log('inside pBox: '+ id);
        return React.createClass({
            getInitialState: function(id) {
                console.log('inside getInitialState: '+ id);
                return {
                    person_id: id
                }
            },

      ........

尝试将状态person_id分配给外部传递的id。我在pBox内输出数据，但React的子函数中的数据丢失了。我已经尝试过var self = this任务，但无济于事。当涉及到JS时，我迷失了范围。

Answer 1

目前，id被getInitialState(id)的参数遮蔽并变为undefined，因为调用getInitialState时没有任何参数。

因此，删除参数，您可以使用id中pBox方法中提供的getInitialState()。

pBox: function(id) {    
    console.log('inside pBox: '+ id);
    return React.createClass({
        getInitialState: function() {
            console.log('inside getInitialState: '+ id);
            return {
                person_id: id
            }
        },

Answer 2

函数getInitialState期待id的参数。如果没有收到，则该局部范围内仍有id但它包含undefined。正如@Shuhei所提到的，从函数中删除该参数或给它一个不同的名称将允许您访问更高范围的id。

为了便于阅读，我建议您将React.CreateClass分成另一个函数。

你的新功能看起来像这样：

function foo(id){
  console.log('inside pBox: '+ id);
  return React.CreateClass({...}) //Same code you had before
}

你的代码看起来像这样：

Box.expandBox(id);


var Box= (function(){
   return {
    expandBox: function(id) {
        console.log('inside expandBox: ' + id);
        ReactDOM.render( React.createElement(this.pBox(id)), document.getElementById('activate'))
    },
    pBox: foo

....

JS / Reactjs - 访问从顶级函数传递的参数

2 个答案: