Question

我是React的新手，正在尝试列出所有数组编号。从本教程中，我了解到功能也是反应的组成部分。我试图创建一个功能组件并在另一个组件（PersonList）中访问该功能组件，但是在执行过程中出现了以下错误。

参考错误：编号未定义[了解更多]

如果我用NumberList替换PersonList，它可以正常工作。您能告诉我代码有什么问题吗？

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

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中没有没有回报。请像上面和demo

一样进行更改

Answer 2

您在render方法中缺少return语句。正确的代码如下所示。

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')
);

React js组件未呈现

3 个答案: