如何在渲染中渲染几个div，里面有一个函数

【问题标题】：How to render several div in render with a function inside如何在渲染中渲染几个div，里面有一个函数
【发布时间】：2020-03-12 03:06:06
【问题描述】：

我想不通，我尝试在渲染中使用但仍然失败，如何解决这个问题？

render() {
        return (
          {
            <div className="ABC">
              <a>ABC</a>
            </div>
            <div className="DEF">
          }
          {*Some function create inner html content*}
          {
            </div>
          }

我尝试添加标签，但似乎仍然出现错误...

【问题讨论】：

你需要在单个 div 中编写整个代码，因为 react 组件将返回单个 div 元素
或者有没有可能将DEF div添加到ABC div中？像 return{
{
} {function}{}}
是的，你也可以这样做
我将 DEF div 添加到我的代码中，但它仍然显示此“解析错误：必须将相邻 JSX 元素包装在封闭标记中。您想要一个 JSX 片段 ... >" 据我所知，所有标签都是配对的......

标签： javascript node.js reactjs jsx

【解决方案1】：

render 方法只能返回一个根节点。您可以将所有内容包装在单个元素中（例如 <div>），也可以使用 react fragments

React 中的一个常见模式是组件返回多个元素。片段让您可以对子列表进行分组，而无需向 DOM 添加额外的节点。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

您还将看到上面的简短语法写成：

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

【讨论】：

【解决方案2】：

您需要为 JSX 设置一个结束元素。这可能会有所帮助：

function bar(){
    return (
          <div>
             Some other content
          </div>
    );
function foo(){
    return (
         <React.Fragment> 
                 <div>
                     Some Content in here
                     { bar() }
                 </div
         </React.Fragment> 
    );

render(){
    return(
        { foo() }
    )

}

【讨论】：

但我需要“Some other content” div D 中的 foo 函数生成的那些内容：
所以在 bar() 中调用 foo() 函数，然后在 render 中调用 bar。

【解决方案3】：

您必须使用单个 div 标签。你可以这样做

    function foo(){
        return (
             <div> New content here </div>
        );

    render(){
        return(
           <div className="ABC">
              <a>ABC</a>
              { foo() } 
           </div>
        )
    }

【讨论】：