渲染2个功能（学习最佳实践）

2024-05-14 • 问答

大家好，我想了解实现此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("rootapp"));

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

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

渲染2个功能（学习最佳实践）

shangxinde86 回答：渲染2个功能（学习最佳实践）

大家都在问