Я осваиваю 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;
0
user4157770 4 Сен 2016 в 03:12

3 ответа

Лучший ответ

Это потому, что вы несколько раз рендерируете один и тот же контент в один и тот же 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')
);
0
Kryten 4 Сен 2016 в 00:19

Вы визуализируете все списки в один и тот же элемент html (со стадией id), которые перезаписывают друг друга.

Вместо этого вам нужно написать другой компонент - вашу точку входа в приложение и отобразить там несколько ваших списков. Затем ваша точка входа будет отображена в элементе html с этапом id, который содержит несколько ваших списков:

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"));
0
Lyubomir 4 Сен 2016 в 00:20
ReactDOM.render(
    <List content={textNodes}/ > , document.getElementById("stage"));

Эта строка отображает ваши списки в том же блоке div с идентификатором stage в вашем шаблоне. Итак, тот список, который вы видите, является третьим отображенным списком. Вы должны использовать другой div с другим идентификатором, чтобы отображать все три списка.

0
Jan Franz Palngipang 4 Сен 2016 в 00:20