如何从单独的组件传入 props？

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：第一待办 2：第二待办 3：第三待办 4：第四待办

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