Question

（编辑）的在下面的简单示例中，我有一段时间使用语法来传递和访问引用数组成员的道具。

当作为道具传递时，我应该如何正确地解决对象数组的属性？

我想通过引用传递，我不明白为什么我不能这样做。

由于

// Define a type constant
const MyType {
    constructor( props ) { 
      this.state = {
        panelNumber : 0,
        panelDisplayMode : 'SINGLE'
      }
    } 
}

// create a collection of those type constants
class MyStore extends React.Component{

    MyCollection = [];

    constructor () {
        super();
    }

    componentWillMount(){
       var nonsense = new MyType;
       nonsense.panelNumber = 123;
       nonsense.panelDisplayMode = "SINGLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 456;
       nonsense.panelDisplayMode = "DOUBLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 789;
       nonsense.panelDisplayMode = "TRIPLE";
       this.MyCollection.push(nonsense);           
    }

    // pass one of the instances (array) of the collection to a component.
    render () {
        <div>
          <MyComponent panel={this.MyCollection[2]}
        </div?
    }
}

// access one of the properties of the instance (array).
const MyComponent = props => (
    <div>
        <p>MODE:</p>{ props.panel.panelDisplayMode }
    </div>
);

Answer 1

使用setState函数更新您的状态，并映射您的集合数组以将单个集合传递给您的组件。像这样的东西

class MyStore extends React.Component{
    constructor(props) {
       this.state = {
         MyCollection: [],
       }
    }
    componentWillMount(){
       var myCollection = [];
       var nonsense = new MyType;
       nonsense.panelNumber = 123;
       nonsense.panelDisplayMode = "SINGLE";
       myCollection.push(MyPanel);

       nonsense = new MyType;
       nonsense.panelNumber = 456;
       nonsense.panelDisplayMode = "DOUBLE";
       myCollection.push(MyPanel);

       nonsense = new MyType;
       nonsense.panelNumber = 789;
       nonsense.panelDisplayMode = "TRIPLE";
       myCollection.push(MyPanel);

       this.setState({MyCollection:myCollection});           
    }

    // pass one of the instances (array) of the collection to a component.
    render () {
        <div>
          {this.state.MyCollection.map(
            singleCollection=>{
               <MyComponent panel={singleCollection}>
            }
          )}
        </div>
    }
}
// access one of the properties of the instance (array).
const MyComponent = props => (
    <div>
        <p>MODE:</p>{ props.panel.panelDisplayMode }
    </div>
);

修改

我修复了一些语法错误后运行了这段代码。你有什么特别的错误吗？顺便说一下这是代码

class MyType {
    constructor( props ) { 
      this.state = {
        panelNumber : 0,
        panelDisplayMode : 'SINGLE'
      }
    } 
}

// create a collection of those type constants
export default class MyStore extends React.Component{
    MyCollection = [];
    constructor () {
        super();
    }

    componentWillMount(){
       var nonsense = new MyType;
       nonsense.panelNumber = 123;
       nonsense.panelDisplayMode = "SINGLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 456;
       nonsense.panelDisplayMode = "DOUBLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 789;
       nonsense.panelDisplayMode = "TRIPLE";
       this.MyCollection.push(nonsense);           
    }

    // pass one of the instances (array) of the collection to a component.
    render () {
        return(
            <div>
                <MyComponent panel={this.MyCollection[2]}/>
            </div>
        )
    }
}

// access one of the properties of the instance (array).
const MyComponent = props => {
    console.log("props ", props);
    return (
        <div>
            <p>MODE:</p>
            { props.panel.panelDisplayMode }
        </div>
    );
}

Answer 2

状态是不可变的，所以你不应该尝试this.state.array.push

尝试：

this.setState({ 
    MyCollection: this.state.MyCollection.concat([MyPanel])
});

编辑：所以在编辑之后，你应该这样做：

componentWillMount(){
       var nonsense = new MyType;
       nonsense.panelNumber = 123;
       nonsense.panelDisplayMode = "SINGLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 456;
       nonsense.panelDisplayMode = "DOUBLE";
       this.MyCollection.push(nonsense);

       nonsense = new MyType;
       nonsense.panelNumber = 789;
       nonsense.panelDisplayMode = "TRIPLE";
       this.MyCollection.push(nonsense);

       this.setState({ 
        MyCollection: this.state.MyCollection.concat([this.MyCollection])
       });  
    }

这会将您添加的元素添加到您的状态（您所在州的数组中）。

React props语法 - 无法将引用传递给数组

2 个答案: