Fatal编程技术网
  • html/
  • 如何在ReactJS中解释任何类型的HTML包装容器（div…）？

如何在ReactJS中解释任何类型的HTML包装容器（div…）？

html reactjs

如何在ReactJS中解释任何类型的HTML包装容器（div…）？,html,reactjs,Html,Reactjs,因此，我很难定义如何将包装容器从普通HTML解释为ReactJS。 这里有一个例子可以解释我的意思 HTML代码： <body> <header> <div class="fixed-header"> ...content </div> <div class="primary-header"> ...content </div> </header>

因此，我很难定义如何将包装容器从普通HTML解释为ReactJS。 这里有一个例子可以解释我的意思

HTML代码：

<body>

<header>
    <div class="fixed-header">
        ...content
    </div>
    <div class="primary-header">
        ...content
    </div>
</header>

<main>
    <article class="card">
       ...content
    </article>
    <article class="card">
       ...content
    </article>
    <article class="card">
       ...content
    </article>
    <article class="card">
       ...content
    </article>
    <article class="card">
       ...content
    </article>
</main>

</body>


…内容
…内容
…内容
…内容
…内容
…内容
…内容
根据这段代码，我想制作3个组件：

  • 固定收割台
  • 主收割台
  • 条款要素
    • 问题是元素“header”和“main”是包装容器，它们应用了一些CSS样式，实际上会影响它们内部的子元素，因此我不能直接去掉它们。 我已经制作了三个react组件：FixedHeader、PrimaryHeader和Card。现在的问题是如何在ReactJS中实现“header”和“main”元素，如下所示：

    <header>
   <FixedHeader/>
   <PrimaryHeader/>
</header>
<main>
   <Card/>
   <Card/>
   <Card/>
   <Card/>
   <Card/>
</main>
    我不想让它们成为组件，因为它们只是包装器，而且我不想为它们使用React.Fragment，因为据我所知CSS不能应用于片段

    任何帮助都将不胜感激。

    我想您恐怕不能在React中使用
    和
    元素

    如果是这样，别担心。您可以在React JSX中使用任何html元素。这是完全正确的。您不需要转换组件中的每个html元素。将html元素转换为组件只是为了重用。如果不需要重复代码，只需在JSX中编写简单的html元素，它们就会由JSX呈现

    我看到的唯一问题是不能在React中渲染兄弟姐妹。您需要使用
    ：

    返回(
)
    是
    React.Fragment
    的别名

    如果您不想使用
    片段
    ，那么您可以简单地用
    包装它们

    使用
    包裹元素时，浏览器将不会呈现该元素。但它将呈现其中的内容。因此，您将得到与html中完全相同的结果。因此，您无需担心进一步的css来设置样式。

    我认为您担心在React中不能使用
    和
    元素

    如果是这样，别担心。您可以在React JSX中使用任何html元素。这是完全正确的。您不需要转换组件中的每个html元素。将html元素转换为组件只是为了重用。如果不需要重复代码，只需在JSX中编写简单的html元素，它们就会由JSX呈现

    我看到的唯一问题是不能在React中渲染兄弟姐妹。您需要使用
    ：

    返回(
)
    是
    React.Fragment
    的别名

    如果您不想使用
    片段
    ，那么您可以简单地用
    包装它们

    使用
    包裹元素时，浏览器将不会呈现该元素。但它将呈现其中的内容。因此，您将得到与html中完全相同的结果。因此，您不必担心进一步的css会对其进行样式化。

    不必像您所提到的那样关注组件的创建。它创建了更干净、更模块化的代码，更易于维护和重用

    您可以创建灯光、无状态组件，但仍可以根据需要应用样式

    上面演示的一些示例代码：

    import React, { useState, memo } from "react";
import "./styles.css";

// stateless, pure functional component
const Header = memo(props => (
  <header className="header">
    {props.children}
    <hr />
    <nav>
      <a href="/" title="home">
        home
      </a>
      &nbsp;
      <a href="/about" title="about">
        about
      </a>
    </nav>
    <hr />
  </header>
));

const Card = props => {
  return (
    <button onClick={props.onClick} value={props.name}>
      {props.name}
    </button>
  );
};

const allCards = [{ name: "foo" }, { name: "bar" }, { name: "baz" }];

export default function App() {
  const [cards] = useState(allCards);

  const onClick = e => {
    e.preventDefault();
    console.info(e.target.value);
  };

  return (
    <>
      <Header>
        <h1>Home</h1>
      </Header>
      <main>
        {cards &&
          cards.map((card, index) => (
            <Card key={index} name={card.name} onClick={onClick} />
          ))}
      </main>
    </>
  );
}

    import React，{useState，memo}来自“React”；
导入“/styles.css”；
//无状态、纯功能组件
常数头=备忘录（道具=>(
{props.children}

    

    
));
康斯特卡=道具=>{
返回(
{props.name}
);
};
const allCards=[{name:“foo”}，{name:“bar”}，{name:“baz”}]；
导出默认函数App（）{
常量[卡]=使用状态（所有卡）；
const onClick=e=>{
e、 预防默认值（）；
控制台信息（如目标值）；
};
返回(
家
{卡片&&
卡片.地图（（卡片，索引）=>(
))}
);
}
    无需像您提到的那样关注组件的创建。它创建了更干净、更模块化的代码，更易于维护和重用

    您可以创建灯光、无状态组件，但仍可以根据需要应用样式

    上面演示的一些示例代码：

    import React, { useState, memo } from "react";
import "./styles.css";

// stateless, pure functional component
const Header = memo(props => (
  <header className="header">
    {props.children}
    <hr />
    <nav>
      <a href="/" title="home">
        home
      </a>
      &nbsp;
      <a href="/about" title="about">
        about
      </a>
    </nav>
    <hr />
  </header>
));

const Card = props => {
  return (
    <button onClick={props.onClick} value={props.name}>
      {props.name}
    </button>
  );
};

const allCards = [{ name: "foo" }, { name: "bar" }, { name: "baz" }];

export default function App() {
  const [cards] = useState(allCards);

  const onClick = e => {
    e.preventDefault();
    console.info(e.target.value);
  };

  return (
    <>
      <Header>
        <h1>Home</h1>
      </Header>
      <main>
        {cards &&
          cards.map((card, index) => (
            <Card key={index} name={card.name} onClick={onClick} />
          ))}
      </main>
    </>
  );
}

    import React，{useState，memo}来自“React”；
导入“/styles.css”；
//无状态、纯功能组件
常数头=备忘录（道具=>(
{props.children}

    

    
));
康斯特卡=道具=>{
返回(
{props.name}
);
};
const allCards=[{name:“foo”}，{name:“bar”}，{name:“baz”}]；
导出默认函数App（）{
常量[卡]=使用状态（所有卡）；
const onClick=e=>{
e、 预防默认值（）；
控制台信息（如目标值）；
};
返回(
家
{卡片&&
卡片.地图（（卡片，索引）=>(
))}
);
}
    不清楚您到底想要什么。我有一个简单的HTML文件（就像文章中的那个），我正在尝试将其划分为可重用的组件。我已经制作了3个组件（本文中的组件），但问题是我不知道如何具体实现“header”和“main”元素作为React组件，因为功能上“仅仅是包装器”并不使它们适合React组件。在纯HTML中，它们应用了一些CSS样式，如果我只是删除了它们，页面的大部分内容就不会像它们那样了。我希望我说得很清楚。我不清楚你到底想要什么