React js组件没有呈现。

Question

我是新的反应，并试图列出所有的数组数字。从本教程中，我所理解的是函数也是react中的组件。我试图创建一个函数组件，并在另一个组件(PersonList)中访问该功能组件，但是在执行过程中，我得到了以下错误。

ReferenceError: number is definedLearn More

如果我将PersonList替换为NumberList，它就能正常工作。你能告诉我我的密码出了什么问题吗？

工作代码=============

ReactDOM.render(
    <NumberList />,
    document.getElementById('root')
);

不工作代码================

class PersonList extends React.Component {

    render() {
        <div>
            <NumberList/>
        </div>
    };
}

function NumberList() {
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) =>
        <li>{number}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
}



ReactDOM.render(
    <PersonList />,
    document.getElementById('root')
);

Answer 1

更改您的PersonList组件如下：

 class PersonList extends React.Component {

    render() {
      return ( //no return in your component
         <div>
          <NumberList/>
         </div>
      );

    };
}

在你的PersonList .Change中没有返回，就像上面的和演示一样

Answer 2

在render方法中缺少一个返回语句。正确的代码如下所示。

class PersonList extends React.Component {

  render() {

    return(
      <div>
        <NumberList />
      </div>
    )
  };
}

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}


ReactDOM.render(
  <PersonList />,
  document.getElementById('root')
);

Answer 3

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);