Question

我不知道对应的标题应该是什么，如果它不准确，那就很抱歉。

我有状态对象列表：

people: [
{first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'},
{first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'},
],

目前，我将每个属性渲染为如下列：

var first = this.state.people.map(function(person, i) {
            return (
                <div key={i}>
                    {person.first}
                </div>
            )
        });

last，title等同样的事情。

然后在return：

return (
            <div>
                <Grid>
                    <Row className="show-grid">
                        <Col md={2}>
                            {first}
                        </Col>

                        <Col md={2}>
                            {last}
                        </Col>

                        <Col md={2}>
                            {title}
                        </Col>
                        <Col md={2}>
                            {company}
                        </Col>
                        <Col md={2}>
                            Recruiter Phone Screen
                        </Col>

                    </Row>
            </Grid>

            </div>
        )

这目前有效，但我有两个问题：

1）我对每个属性都有一个var first = ...，var last = ...等等。

2）如果缺少一个属性，它就会混淆一切。 IE - 如果First_1没有标题，则Title_2将被提供给该记录。

我试图将所有内容组合成一个变量：

var test = this.state.people.map(function(person, i) {
            return {
                first: function() {
                    return (
                        <div key={i}>{person.first}</div>
                    )
                },

                last: function(){
                    return (
                        <div>{person.last}</div>
                    )
                }
            }

        });

在return：

 <Col md={2}>
     {test.first}
 </Col>
 <Col md={2}>
     {test.last}
 </Col>

等

这不起作用，但我想知道是否有办法让这项工作成功？

Answer 1

我会用一个函数来完成这个，比如：

在渲染中你会得到这个：

getParams (param) {
 this.state.people.map(function(person, i) {
   return (
      <div key={i}>
          {person[param]}
      </div>
   )
  })
}

Answer 2

我认为处理这种情况的更好方法是创建一个表而不是使用return ( <div> <Grid> <Row className="show-grid"> <Col md={2}> {this.getParams('first')} </Col> <Col md={2}> {this.getParams('last')} </Col> <Col md={2}> {this.getParams('title')} </Col> <Col md={2}> {this.getParams('company')} </Col> <Col md={2}> Recruiter Phone Screen </Col> </Row> </Grid> </div> )

columns in a div

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      people: [
        {first:'First_1', last:'Last_1', title:' Title_1', company:'Company_1'},
        {first:'First_2', last:'Last_2', title:'Title_2', company:'Company_2'},
        ]
    }
  }
  render() {
       return (
          <table>
              <tbody>
                  {this.state.people.map(function(item, index) {
                      return (
                          <tr>
                              <td>{item.first}</td>
                              <td>{item.last}</td>
                              <td>{item.title}</td>
                          </tr>
                      )
                   })}
              </tbody>
          </table>
        )     
   }
}
        
        ReactDOM.render(<App/>, document.getElementById('app'));

ReactJS：渲染多个对象

2 个答案: