Передача данных из функционального компонента в app.js

Question

Я новичок в React, все еще изучаю основы этого. У меня есть компонент в students.js:

export const studentslist = () => {
  return [
    {
      name: "aaaa",
      surname: "aaa"
    },
    {
      name: "bbbbb",
      surname: "bbbb"
    },
    {
      name: "ccccc",
      surname: "ccc"
    }
  ];
};

Как я могу передать этот список студентов моему App.js в состояние и использовать его?

Answer 1

studentslist не является компонентом, так как функция возвращает только массив данных, но если вы хотите использовать то, что функция возвращает в качестве начального состояния компонента, вы можете импортировать его в файл компонента и присвоить этому состоянию либо в конструктор или свойство класса.

Пример

// studentslist.js
export const studentslist = () => {
  return [
    {
      name: "aaaa",
      surname: "aaa"
    },
    {
      name: "bbbbb",
      surname: "bbbb"
    },
    {
      name: "ccccc",
      surname: "ccc"
    }
  ];
};

// App.js
import React from "react";
import studentslist from "./studentslist";

class App extends React.Component {
  state = { studentslist: studentslist() };

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

const studentslist = () => {
  return [
    {
      name: "aaaa",
      surname: "aaa"
    },
    {
      name: "bbbbb",
      surname: "bbbb"
    },
    {
      name: "ccccc",
      surname: "ccc"
    }
  ];
};

class App extends React.Component {
  state = { studentslist: studentslist() };

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<App />, 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>