javascript - React -appendChild() 一个 React Link 标签到现有的 li 追加 [object, object]

Question

有一个循环来限定对象日期键/值是否与日历上的日期匹配。如果确实如此，我希望它将 React Link 标签 append 到相应的 li 元素。条件循环工作正常，但当它 append Link 标记时，它会 append [object, object]，因为我使用的是 createTextNode()。

是否有另一种方法可以在不使用 createTextNode() 的情况下将 Link 标记 append 到现有的 li 上？

我完成了通常的谷歌搜索，但没有运气。

for (let i = 0; i < events.length; i++) {
     const link = (<Link to={`/events/${events[i].eventId}`}> . 
                  {events[i].title}</Link>);
     const eventLink = document.createTextNode(link);

     if (events[i].date.slice(15) === day.toString()) {
     cell.appendChild(eventLink);
    }
}

需要 li 元素包含 React Link 标签，而不是文本节点。

更新使用 ReactDOM 渲染和 BrowserRouter 进行代码，但是当我单击链接标签时，React 不会渲染路由组件。

for (let i = 0; i < events.length; i++) {
    const link = (
                <>
        {day.toString()}
        <Link to={`/events/${events[i].eventId}`}>{events[i].title}</Link>
        </>);

        const eventDate = events[i].date.split('-');
        const eventYear = eventDate[0];
        const eventMonth = eventDate[1];
        const eventDay = eventDate[2];
        if (eventDay === day.toString() &&
        eventMonth === (month + 1).toString() &&
        eventYear === year.toString()) {
        ReactDOM.render(<BrowserRouter>{link}</BrowserRouter>, cell);
            }
        }

Answer 1

不知道为什么需要这样做 - 我很确定还有其他方法可以将基于数组的 Link 渲染到 DOM 中。

但是，如果你坚持，你应该使用 ReactDOM

在你的循环中:

// create an empty div to hold our links:
const tempDiv = document.createElement('div');

// render links into the empty div
ReactDOM.render(eventLinks, tempDiv);

// append the link, since you don't want the div in cell
cell.appendChild(tempDiv.firstChild); // there is only 1 child

这非常“hacky” - 我强烈建议寻找一种真正的“React”方式来做到这一点。

<小时/>

编辑:

您更新的代码将不起作用。 react-router 依赖于内部上下文进行导航，并且 *Router 组件提供该上下文 - 您的代码为每个链接含义呈现一个 BrowserRouter每个链接都有自己的上下文。多个路由器可能无法在一个页面中正常工作，因为它们会争夺对浏览器的控制权。

首先，您可能不应该在循环的每次迭代中调用 ReactDOM.render 。 ReactDOM.render 控制 cell 内的所有内容 - 一次又一次地渲染它，这意味着只有最后一次调用有效。

其次，您的 BrowserRouter 应放置在应用程序的顶层(例如，在您的根组件中)。

再说一遍，像这样操作 dom 不是你应该使用 React 的方式。我很好奇您正在构建什么样的应用程序以及它的结构如何？

<小时/>

所以这就是我认为你应该做的 - 因为你已经在使用 React，我想有一个组件树(例如，你有一个渲染其他组件的顶级组件等)

因此，在应用程序的最顶部，您应该将所有内容包装在 BrowserRouter 中。

// index.js, maybe.

// assuming App is your "top level component"
import App from './App.jsx';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
, document.getElementById('root'))

现在，创建一个 EventLinks 组件来呈现所有链接:

// EventLinks.jsx

const EventLinks = ({ events }) => (
  events.map((event) => (
    <li key={event.eventId}>
      <Link to={`/events/${event.eventId}`}>
        {event.title}
      </Link>
    </li>
  ))
);

在 cell 所在的组件中，直接渲染链接。

// Cell component

const Cell = ({ events }) => {
  // filter events if you need to here, since you have that `if` logic originally

  const visibleEvents = events.filter(filterFunction);

  return (
    <ul>
      <EventLinks events={visibleEvents} />
    </ul>
  );
}

这可能与您的应用的结构不完全匹配，但我希望您能理解。

因此您的 App 呈现布局和 Cell 组件，然后您的 Cell 呈现 EventLinks。

老实说，除了应用程序的唯一入口点之外，您根本不应该使用 ReactDOM。