文章/答案/技术大牛

发布

社区首页 >问答首页 >渲染2个函数(学习最佳实践)

问渲染2个函数(学习最佳实践)
EN

Stack Overflow用户

提问于 2019-11-20 17:46:05

回答 1查看 41关注 0票数 0

大家好，我想知道实现以下代码的最佳实践：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"));

如何在单个元素中呈现这些函数？

javascript

reactjs

jsx

回答 1

Stack Overflow用户

发布于 2019-11-20 18:12:26

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58951229

复制

相似问题

问渲染2个函数(学习最佳实践)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问渲染2个函数(学习最佳实践)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问渲染2个函数(学习最佳实践)
EN