javascript - 如何正确编写一个可以接收 props 的 React 类组件？

Question

我知道如何在演示组件中接收 Prop ，但目前我还需要使用具有逻辑的函数，因此我现在需要将我的组件更改为类组件，我不知道为什么我不能领取 Prop 。

这是我的组件的一部分:

class MemberInfoSubPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
   this.renderRow = this.renderRow.bind(this);
  }

正如你所看到的，我正在使用 ES6 并且我正在尝试从 map 中渲染行，但现在我只是尝试接收 props。提供的此代码正确吗？我的意思是通常的语法。

PS:有关其他信息，我收到“props”未定义。所以是的，更改组件后我没有收到 Prop 。之前我能够收到 Prop 。

编辑:

import React, {PropTypes} from 'react';
import ons from 'onsenui';
import * as Ons from 'react-onsenui';

class MemberInfoSubPage extends React.Component {
  //const result = FlightApi.getAllFlightList();
  constructor(props) {
    super(props);
    this.state = {

    };
   // this.stateToEntry = this.stateToEntry.bind(this);
   this.renderRow = this.renderRow.bind(this);
  }

  renderRow(row,index) {
    const x = 40 + Math.round(5 * (Math.random() - 0.5)),
          y = 40 + Math.round(5 * (Math.random() - 0.5));

    const names = ['Max', 'Chloe', 'Bella', 'Oliver', 'Tiger', 'Lucy', 'Shadow', 'Angel'];
    const name = names[Math.floor(names.length * Math.random())];

    return (
      <Ons.ListItem key={index}>
        <div className='left'>
          <img src={`http://placekitten.com/g/${x}/${y}`} className='list__item__thumbnail' />
        </div>
        <div className='center'>
          {name}
        </div>
      </Ons.ListItem>
    );
  }

  render() {
      if (props['index'] == 0) {
        return (
          <div className="memberInfoSubPage">
            <div className="memberInfoSubPage-row1">

              <span>{props['data-user'].id}</span>

              <table border={1} className="memberInfoSubPage-Table">
                <tr>
                  <th style={{color: 'grey'}}>Rank</th>
                  <th style={{color: 'grey'}}>Country</th>
                </tr>
                <tr>
                  <td>{props['data-user'].rank}</td>
                  <td>{props['data-user'].country}</td>
                </tr>
              </table>
            </div>
            <div>
              <div className="memberInfoSubPage2-Summary-Title">Placement Performance Summary</div>
              <table border={1} className="memberInfoSubPage-Table2">
                <tr>
                  <td>L</td>
                  <td>R</td>
                </tr>
                <tr>
                  <td>{props['data-user'].placementPerformanceSummary.L}</td>
                  <td>{props['data-user'].placementPerformanceSummary.R}</td>
                </tr>
              </table>
            </div>
             <div>
              <div className="memberInfoSubPage2-Summary-Title">Today Detail</div>
              <table border={1} className="memberInfoSubPage-Table3">
                <tr>
                  <td>L</td>
                  <td>R</td>
                </tr>
                <tr>
                  <td>{props['data-user'].todayDetail.L}</td>
                  <td>{props['data-user'].todayDetail.R}</td>
                </tr>
              </table>
            </div>
            <div> <table border={1} className="memberInfoSubPage-Table3">
                <tr><th style={{color: 'grey'}}>Next Level Upgrade</th></tr>
                <tr>
                  <td>{props['data-user'].nextLevelUpgrade}</td>
                </tr>
              </table>
            </div>

            <Ons.Button style={{margin: '6px'}}>Instant Upgrade</Ons.Button>


            <div>
              <div className="memberInfoSubPage2-Summary-Title" style={{color: 'grey'}}>Conversion Share Platform Portfolio</div>
              <table border={1} className="memberInfoSubPage-Table3">
                <tr style={{color: 'grey'}}>
                  <th>Market($)</th>
                  <th>Unit</th>
                  <th>Tradable Unit</th>
                </tr>
                <tr>
                  <td>{props['data-user'].market}</td>
                  <td>{props['data-user'].unit}</td>
                  <td>{props['data-user'].tradableUnit}</td>
                </tr>
              </table>
            </div>
             <div><table border={1} className="memberInfoSubPage-Table3">
                <tr style={{color: 'grey'}}>
                  <th>Lock Units</th>
                  <th>Avg Price</th>
                  <th>Last Price</th>
                </tr>
                <tr>
                  <td>{props['data-user'].lockUnits}</td>
                  <td>{props['data-user'].avgPrice}</td>
                  <td>{props['data-user'].lastPrice}</td>
                </tr>
              </table>
            </div>
          </div>
        );
      }
      else  if (props['index'] == 1) {
        return (
            <Ons.List
            dataSource={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
            renderRow={this.renderRow}
            renderHeader={() => <Ons.ListHeader>Summary</Ons.ListHeader>}/>
              /*<div className="memberInfoSubPage2-Summary-Title">Summary</div>
              <table className="memberInfoSubPage2-Summary-Table">
                <tr><td>Credit</td><td>{props['data-user'].summary.credit}</td></tr>
                <tr><td>Register</td><td>{props['data-user'].summary.register}</td></tr>
                <tr><td>CP(S)</td><td>{props['data-user'].summary.cpS}</td></tr>
                <tr><td>CP(0)</td><td>{props['data-user'].summary.cp0}</td></tr>
                <tr><td>AP</td><td>{props['data-user'].summary.ap}</td></tr>
                <tr><td>BO Point</td><td>{props['data-user'].summary.boPoint}</td></tr>
                <tr><td>Listed Company Fund</td><td>{props['data-user'].summary.listedCompanyFund}</td></tr>
                <tr><td>Promo</td><td>{props['data-user'].summary.promo}</td></tr>
                <tr><td>TT</td><td>{props['data-user'].summary.tt}</td></tr>
                <tr><td>Re-Entry Point</td><td>{props['data-user'].summary.reEntryPoint}</td></tr>
              </table>*/
        );
      }
      else {
        return (
          <p>Not receiving any index. No content can be shown.</p>
        );
      }
  }
};

MemberInfoSubPage.propTypes = {
  'data-pageName': PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  'defaultOption': PropTypes.string,
  value: PropTypes.string,
  'error': PropTypes.string,
  'options': PropTypes.arrayOf(PropTypes.object)
};

export default MemberInfoSubPage;

这是我的代码，我很确定我错过了一些东西。还有很多未完善的代码，函数 renderRow 和 Onsen 列表是复制粘贴的。

Answer 1

props 位于组件实例上，因此您需要将其引用为 this.props 而不仅仅是 props 渲染函数。