React: 使用 props 传递数据

组件之所以可重用，可定制，是因为可以向组件传递参数。

如下的 App 主组件有两个 ExpenseItem 子组件，可以以属性的形式向它们传递参数：

import ExpenseItem from "./components/ExpenseItem";

function App() {
  const expenses = [
    { id: "e1", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
    {
      id: "e2",
      title: "New Desk (Wooden)",
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];

  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}
      ></ExpenseItem>
    </div>
  );
}
export default App;

React 确使组件获得唯一一个参数 props，此参数是一个对象，从上层组件接收到的所有属性都存在于此 props 对象中：

ExpenseItem.js：

import "./ExpenseItem.css";

// 这里 props = properties, 可以是任意名称, 例如 data
// 但一般写成 props
function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}
export default ExpenseItem;

Vue 的 props 传递是另一种写法：

app.vue:

<template>
  <div>
    <active-element
      :topic-title="activeTopic && activeTopic.title"
      :text="activeTopic && activeTopic.fullText"
    ></active-element>
    <knowledge-base></knowledge-base>
  </div>
</template>

ActiveElement.vue:

<template>
  <section>
    <h2>{{ topicTitle }}</h2>
    <p>{{ text }}</p>
  </section>
</template>

<script>
export default {
  props: ['topicTitle', 'text'],
};
</script>