Question

我正在努力了解道具以及道具的工作原理。到目前为止，这是我的布局。

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

    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：第四个待办事项

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

Answer 2

将数据内部存储为state是处理数据的“反应”方式。

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

components-and-props

state

请勿导入数据，将其保存在state组件的Todos中，然后将其作为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} />;
  }
}

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

2 个答案: