Question

考虑来自http://facebook.github.io/react/docs/lists-and-keys.html

的这段代码

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

我的问题是，你在哪里看到：

<NumberList numbers={numbers} />

我理解这是一个正在渲染的组件，我们给它一个我们创建的属性，但设置该属性等于它自己的意义是什么？它让我有点困惑。

谢谢！

Answer 1

传递的参数不是NumberList（AKA本身）的实例，而是数字[1, 2, 3, 4, 5]的数组。看看代码：

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

然后我们访问此行的number属性：

const numbers = props.numbers;

希望有意义！

为什么在DOM渲染中将属性设置为等于自身 - React.js

1 个答案: