Question

我是React的新手，我创建了一个项目，在其中使用了两个在主要组件中定义的函数。我想知道如何将功能更改为组件。

这是我要更改为组件的两个功能：

function AnswerFrame(props) {

  var selectedNumbers = props.selectedNumbers.map(function(i) {
    return <span onClick={props.unselectNumber.bind(null, i)}>{i}</span>;
  });

  return (
    <div id="answer-frame">
      <div className="well">{selectedNumbers}</div>
    </div>
  );
}

function NumbersFrame(props) {
  var selectNumber = props.selectNumber,
    usedNumbers = props.usedNumbers,
    selectedNumbers = props.selectedNumbers,
    numbers = [],
    className = null;

  for (var i = 1; i <= 9; i++) {
    className = "number selected-" + (selectedNumbers.indexOf(i) >= 0);
    className += " used-" + (usedNumbers.indexOf(i) >= 0);
    numbers.push(
      <div className={className} onClick={selectNumber.bind(null, i)}>
        {i}
      </div>
    );
  }

  return (
    <div id="numbers-frame">
      <div className="well">{numbers}</div>
    </div>
  );
}

我已经按照答案之一的结构将两者都更改为组件

import React, { Component } from 'react'; import '../App.css';

export default class NumbersFrame extends Component{

constructor(props) {
        super(props);
    }

render(){


var selectNumber = this.props.selectNumber,
    usedNumbers = this.props.usedNumbers,
    selectedNumbers =  this.props.selectedNumbers,
    numbers = [], 
    className = null;

  for (var i=1; i <=9; i++){
    className = "number selected-" + (selectedNumbers.indexOf(i)>=0);
    className += " used-" + (usedNumbers.indexOf(i)>=0);
    numbers.push(
        <div className={className} onClick={selectNumber.bind(null, i)}>
          {i}
        </div>
      )
     }

  return(
      <div id="numbers-frame">
        <div className="well">
          {numbers}
        </div>
      </div>
      );
 }

}

class AnswerFrame extends React {

  constructor(props) {
        super(props);
  }

  render() {

  var selectedNumbers = this.props.selectedNumbers.map(function(i){
    return(
      <span onClick={this.props.unselectNumber.bind(null, i)}>
        {i}
      </span>
    )
  });

  return(
    <div id="answer-frame">
      <div className="well">
        {selectedNumbers}
      </div>
    </div>
  );

}

使用这两个组件后，我在AnwserFrame组件中遇到以下错误：

TypeError：无法读取未定义的属性“ props”

在行

<span onClick={this.props.unselectNumber.bind(null, i)}>

我认为这是因为在我使用带有props作为参数的函数之前，现在当我更改为组件时，props是未定义的。

关于在功能正常运行之前如何处理该错误的任何想法。

Answer 1

两者都是组件本身，称为功能组件。如果您需要将其转换为类组件，这里是一个示例，

class AnswerFrame extends React.Component{
    render(){

    var selectedNumbers = this.props.selectedNumbers.map(function(i){
      return(
          <span onClick={this.props.unselectNumber.bind(null, i)}>
          {i}
          </span>
        )
    });

    return(
      <div id="answer-frame">
        <div className="well">
          {selectedNumbers}
        </div>
      </div>
      );

}

将功能更改为组件React

1 个答案: