javascript - ReactJS 中属性的类字段

标签 javascript reactjs class-fields

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

class Example extends Component {
  example_titles = props.titles;

  // ...
}

结果是

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

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

我正在使用 Babel 中的第 2 阶段来消除构造函数。我知道如何使用构造函数执行此操作,但如果没有它们,我很难理解这一点。

最佳答案

您可以使用 this.props 访问类属性中的 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>

关于javascript - ReactJS 中属性的类字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51713891/

相关文章:

javascript - Angular 按钮正在调用表单提交按钮,原因未知

javascript - react : Search Results not being displayed?

javascript - 如何使用 lodash 用 1 个 throttle 来控制多个按钮?

reactjs - 无状态组件胖箭头函数中的 Prop 无法使用 eslint 进行验证

javascript - JS 类字段

javascript - JavaScript 中的私有(private)类字段

javascript - 为什么 ESLint 无法识别我的类箭头函数?

javascript - SigmaJS 将图导出为 GEXF

javascript - 生成唯一的随机数

javascript - "Preload"apple-touch-precomposed-icon 添加到主屏幕之前?