Question

我必须要一张卡片。

为此，我需要制作3个组件。

首先是Card Header
Card Description和
第三张主卡，它将为两个组件提供值。

在我的Card类中，我想显示数组数据。我不知道该怎么做。

我相信我应该使用map()，但我不明白怎么做。

我的结构应该是Card header1 Card description1，Card header2 Card description2。

<!Doctype html>
<html>

<head>
  <title>React Cards</title>
  <link rel="stylesheet" href="screen1.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>

<body>
  <script type="text/jsx">
    class Header extends React.Component { render () { return (
    <div className='t1'>
      <h1>{this.props.text}</h1>
    </div>
    ) } } class CardDesc extends React.Component { render () { return (
    <div className='t2' id='this.props.id'>{this.props.text}</div>
    ) } } class Card extends React.Component { render () { return (
    <div className='t3'>
      <Header text="this.props.head" />
      <CardDesc text="this.props.des" />
    </div>
    ) } } var cardContent = [ {head:'Header one',des:'000'}, {head:'Header two',des:'001'},
    {head:'Header three',des:'002'}, {head:'Header four',des:'004'}, {head:'Header
    five',des:'005'}, {head:'Header six',des:'006'} ]; ReactDOM.render(

    <Card />, document.getElementById('root'))
  </script>
  <div id="root"></div>
</body>

</html>

Answer 1

如果您想将变量作为道具传递，请不要使用引号，而是使用{}，因此请更改：

<Header text="this.props.head"/>
<CardDesc text="this.props.des" />

要：

<Header text={this.props.head}/>
<CardDesc text={this.props.des} />

现在，你可以简单地渲染你的卡片：

ReactDOM.render(
  <div>
    {cardContent.map(cardItem => <Card head={cardItem.head} des={cardItem.des} />)}
  </div>
, document.getElementById('root'))

如您所见，渲染函数需要一个根元素（在本例中为div）。

另一种方法是创建CardList组件，并将其渲染，而不是将地图放在ReactDOM.render中。

Answer 2

我认为对根元素的多次渲染是个坏主意，你可以尝试创建像App或其他任何东西的新组件，将你的卡组件最终映射到它中。 Look at this

在类i中渲染数组数据起反应

2 个答案: