Question

我有一个围绕一组对象循环的组件。我还尝试使用无状态函数编写组件。我的设置如下：

app.jsx

import 'babel-polyfill';
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Table from 'react-bootstrap/lib/Table';
import Headings from './intro/headings';
const headings = ['Last change at', 'By Author', 'Summary'];

class Welcome extends React.Component {
  render() {
    const rows = this.props.data.map((row, i) =>
      <Row row={row} key={i} />
    );

    return (
      <div>
        <Table striped bordered condensed hover>
          <Headings headings={this.props.headings} />
          <tbody>
            {rows}
          </tbody>
        </Table>
      </div>
    );
  }
}

Welcome.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object),
  headings: PropTypes.arrayOf(PropTypes.string),
};

ReactDOM.render(
  <Welcome
    name={newPerson}
    title="Recent Changes"
    headings={headings}
    data={data}
  />,
  document.querySelector('.container')
);

headings.jsx

import React, { PropTypes } from 'react';
import Heading from './heading';

const Headings = this.props.map((name, i) =>
  <Heading heading={name} key={i} />
);

Headings.propTypes = {
  heading: PropTypes.string,
};

export default Headings;

我的应用程序似乎编译正常，但是当我在浏览器中打开它时，我一直在chromes web控制台中获取：Cannot read property 'props' of undefined(…)。我对React很新，感觉我的态度。

Answer 1

在此声明中：

const Headings = this.props.map((name, i) =>
  <Heading heading={name} key={i} />
);

this指的是模块上下文，没有props属性。只在组件内部调用this.props才有意义。

这应该有效：

import React, { PropTypes } from 'react';
import Heading from './heading';

const Headings = props => (
  <thead>
    <tr>
      {
        props.headings.map((name, i) =>
          <Heading heading={name} key={i} />
        )
      }
    </tr>
 </thead>
)

export default Headings;

传递到组件

1 个答案: