时间戳

首页 > 解决方案 > 渲染 2 个函数（学习最佳实践）

javascript - 渲染 2 个函数（学习最佳实践）

问题描述

大家好，我想知道最佳实践来实现我在这个 Codepen 中所拥有的东西：Codepen

我的做法：

function Blog(props) {
  const content = props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <hr />
    </div>
  ));
  return <div>{content}</div>;
}

function Perso(props) {
  const content = props.personnages.map(personnage => (
    <div>
      <h3>{personnage.name} </h3>
    </div>
  ));
  return <div>{content}</div>;
}

const personnages = [{ id: 1, name: "Hello", atck: "1", def: "1", spike: "1" }];

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." }
];
ReactDOM.render(
  <Perso personnages={personnages} />,
  document.getElementById("root")
);
ReactDOM.render(<Blog posts={posts} />, document.getElementById("rootapp"));

我想知道我是否可以做一些比以下片段更好的事情：

ReactDOM.render(
      <Perso personnages={personnages} />,
      document.getElementById("root")
);
ReactDOM.render(<Blog posts={posts} />, document.getElementById("rootapp"));

如何在单个元素中呈现这些功能？

标签： javascriptreactjsjsx

解决方案

您可以使用一个主要App的，如周围大多数示例所示。如果您创建了您的应用程序，create-react-app那么您已经拥有了一个。如果没有，你可以使用这样的东西。

const personnages = [{ id: 1, name: "Hello", atck: "1", def: "1", spike: "1" }];

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." }
];

function App() {
  return (
    <div>
      <Blog posts={posts} />
      <Perso personnages={personnages} />
    </div>
  )
}

function Blog(props) {
  const content = props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <hr />
    </div>
  ));
  return <div>{content}</div>;
}

function Perso(props) {
  const content = props.personnages.map(personnage => (
    <div>
      <h3>{personnage.name} </h3>
    </div>
  ));
  return <div>{content}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

推荐阅读