Question

我正在刷一些React，但我遇到了多个渲染的问题。

我有一个List组件，它接受一个“内容”数组并从中构建一个列表。

我希望它能够将相同内容的相同列表呈现3-4次，如下所示。

然而，它实际上只呈现其中一个列表......

为什么不按照我的意愿行事？

我尝试使用循环并在每个（i的值）等上添加不同的关键道具但是没有运气，我读过的大多数文章都很复杂且没用。

这是我目前的代码：

//main.jsx
const React = require("react");
const ReactDOM = require("react-dom");
const List = require("./components/List.jsx");
const textNodes = [{
  id: 1,
  text: "ok"
}, {
  id: 2,
  text: "yep"
}, {
  id: 3,
  text: "aye"
}, {
  id: 4,
  text: "hey bro"
}];

ReactDOM.render( < List content = {
    textNodes
  }
  />, document.getElementById("stage"));
ReactDOM.render(
	<List content={textNodes}/ > , document.getElementById("stage"));
ReactDOM.render( < List content = {
    textNodes
  }
  />, document.getElementById("stage"));
ReactDOM.render(
	<List content={textNodes}/ > , document.getElementById("stage"));

//List.jsx
const React = require("react");
const ListItem = require("./ListItem.jsx");

const List = React.createClass({
  render: function() {
    let listItems = this.props.content.map((item) => < ListItem key = {
        item.id
      }
      itemText = {
        item.text
      }
      />);
		return (
			<ul>
				{listItems}
			</ul >
    )
  }
});

module.exports = List;

//ListItem.jsx
const React = require("react");
const ListItem = React.createClass({
  render: function() {
    return ( < li >
      < h4 > {
        this.props.itemText
      } < /h4>
			</li >
    )
  }
});

module.exports = ListItem;

Answer 1

这是因为您将相同的内容多次渲染到相同的div - 每次渲染时，都会覆盖前一个。

而不是这样做：

ReactDOM.render(<List content={textNodes} />, document.getElementById("stage"));

四次，这样做：

ReactDOM.render(
    <div>
        <List content={textNodes} />
        <List content={textNodes} />
        <List content={textNodes} />
        <List content={textNodes} />
    </div>,
    document.getElementById('stage')
);

Answer 2

将所有列表渲染到相同的html元素（带有id阶段），它们会相互覆盖。

你需要做的是写另一个组件 - 你的应用程序的入口点，然后渲染你的多个列表。然后，您将把您的入口点渲染到包含多个列表的id阶段的html元素中：

const textNodes = [{
  id: 1,
  text: "ok"
}, {
  id: 2,
  text: "yep"
}, {
  id: 3,
  text: "aye"
}, {
  id: 4,
  text: "hey bro"
}];

const List = React.createClass({
  render: function() {
    let listItems = this.props.content.map((item) => < ListItem key = {
        item.id
      }
      itemText = {
        item.text
      }
      />);
        return (
            <ul>
                {listItems}
            </ul >
    )
  }
});

const ListItem = React.createClass({
  render: function() {
    return ( < li >
      < h4 > {
        this.props.itemText
      } < /h4>
            </li >
    )
  }
});

const EntryPoint = React.createClass({
render: function() {
    return ( <div>
            < List content = {textNodes} />
      < List content = {textNodes} />
      < List content = {textNodes} />
   </div>)
  }
})

ReactDOM.render( <EntryPoint />, document.getElementById("stage"));

Answer 3

ReactDOM.render(
    <List content={textNodes}/ > , document.getElementById("stage"));

此行在您的模板上将您的列表呈现在同一个div上，ID为“stage”。因此，您看到的列表是第三个呈现的列表。你应该使用不同id的不同div来渲染所有三个列表。

为什么我的React组件不会多次渲染？

3 个答案: