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

Question

大家好，我想知道最佳实践来实现我在这个 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"));

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

Answer 1

您可以使用一个主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" />