ReactJS 中属性的类字段

【问题标题】：Class fields from properties in ReactJSReactJS 中属性的类字段
【发布时间】：2019-01-13 18:47:32
【问题描述】：

我无法弄清楚如何根据属性正确创建类字段。

class Example extends Component {
  example_titles = props.titles;

  // ...
}

导致

Line 7:  'props' is not defined  no-undef

我在另一个 100% 正确工作的文件中调用这个类，除非我使用以下调用 <Example titles={["titles"]} /> 添加这个标签

我正在使用 Babel 中的第 2 阶段来消除构造函数。我知道如何使用构造函数来做到这一点，但是没有它们我很难理解这一点。

【问题讨论】：

标签： javascript reactjs class-fields

【解决方案1】：

您可以使用this.props 访问类属性中的道具。

class Example extends React.Component {
  example_titles = this.props.titles;

  render() {
    return (
      <div>
        {this.example_titles.map((title, index) => (
          <div key={index}>{title}</div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Example titles={["titles"]} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

【讨论】：