如何从单独的组件传递道具？

Question

我试图弄清楚道具以及它们如何正常工作。 到目前为止，这是我的布局。

我创建了一个名为“TodoData.js”的页面，其中包含我的所有Todos

    const todoss = [
        {
            id: 1,
            text: "First Todo"
        },
        {
            id: 2,
            text: "Second Todo"
        },
        {
            id: 3,
            text: "Third Todo"
        },
        {
            id: 4,
            text: "Fourth Todo"
        }
    ]

    export default todoss;

然后我有我的主页“Todolist.js”，我已经在顶部输入了来自'./TodoData'的“导入TodoData”的数据，但我无法弄清楚如何获取数据并将其映射到页面，我该怎么做？

Answer 1

您可以使用map()函数迭代数组。

import TodoData from './TodoData'

render() {
    return (
        <div>
            {TodoData.map(function(data, idx){
                 return (<li key={idx}>{data.id}:{data.text}</li>)
            })}
      </div>
    );
  }

这是输出：

1：第一次Todo 2：第二次Todo 3：第三次Todo 4：第四次Todo

您可以使用您需要的任何样式。

Answer 2

在内部保存数据，因为state是处理数据的“React”方式。

在现实世界的应用程序中，这些数据将来自外部源，如果开发人员不知道如何在内部保存数据，他将不知道该怎么做。

部件和-道具

州

不要导入数据，将其保存在Todos组件的state中，并将其作为props传递给Todolist 。

// this will act as a presentation of our data
const TodosList = ({ todos }) => (
  <ul>
    {todos.map(({ id, text }) => (
      <li key={id}>{text}</li>
    ))}
  </ul>
);

// This will act as a container for our data
class Todos extends React.Component {
  state = {
    todos: [
      {
        id: 1,
        text: "First Todo"
      },
      {
        id: 2,
        text: "Second Todo"
      },
      {
        id: 3,
        text: "Third Todo"
      },
      {
        id: 4,
        text: "Fourth Todo"
      }
    ]
  };

  render() {
    return <TodosList todos={this.state.todos} />;
  }
}