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

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 的实例（又名本身），而是数字数组 [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

Why set property equal to itself in DOM render - React.js

javascript

reactjs

react-jsx

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

Why set property equal to itself in DOM render - React.js

javascript

reactjs

react-jsx

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