阵营JS：如何不要让标记在最终渲染

我怎样才能在最终的渲染删除<div className='wrapper'></div>各地<main></main>：阵营JS：如何不要让标记在最终渲染

class Projects extends Component { 
    render() { 
    return (
     <div className='wrapper'> 
     <header>Header Content</header> 
     <main>Content goes here</main> 
     <footer>Footer Content</footer> 
     </div> 
    ) 
    } 
}

结果：

<div className='wrapper'> 
    <header>Header Content</header> 
    <main>Content goes here</main> 
    <footer>Footer Content</footer> 
</div>

预期结果不<div className='wrapper'></div>：

<header>Header Content</header> 
<main>Content goes here</main> 
<footer>Footer Content</footer>

问题是渲染只能返回e家长div（或其他标签），不能有兄弟姐妹。

我知道如何做到这一点的vue.js，但不知道有react.js

<template> 
    <header>Header Content</header> 
    <main>Content goes here</main> 
    <footer>Footer Content</footer> 
</template>

将导致：

<header>Header Content</header> 
<main>Content goes here</main> 
<footer>Footer Content</footer>

来源

2017-09-14 Syed

你需要的是一种从'render'返回元素列表/数组的方法。目前不可能。这是讨论此功能的github线程：https：//github.com/facebook/react/issues/2127 –

为什么你想不要包装div？ – Aaron

@Aaron，有两种情况我最终会用相同的包装器标记两次。有办法在vue.js中处理这个问题，我希望即使有这样的反应。 – Syed

如果我的理解是否正确，你只是DN “T将其包含在render：

class Projects extends Component { 
    render() { 
    return (
     <main>Content goes here</main> 
    ); 
    } 
}

或

class Projects extends Component { 
    render() { 
    return <main>Content goes here</main>; 
    } 
}

重新更新的问题：你不会让那个组件。组件必须具有单个顶级元素。例如，你不能返回一组元素。

来源

2017-09-14 11:22:31

问题是渲染可以返回没有兄弟姐妹只有一个父'div'。所以，我需要多个'div'或其他标签，有没有办法做到这一点？请检查修改后的问题。 – Syed

@Syed：这改变了事情。 :-)恐怕你不能让它成为一个组件，组件必须有一个顶级元素。 –

不知道你怎么在“最终渲染”的意思，但你可以添加一些条件，以检查是否包括股利或不

class Projects extends Component { 
    constructor(props) { 
    super(props);  
    this.state = {isIncluded: true}; 
    } 
    render() { 
    if (isIncluded) { // it will be included only if `isIncluded` true 
     <div className='wrapper'> 
     <main>Content goes here</main> 
     </div> 
    } 
    else { // otherwise 
     return (  
     <main>Content goes here</main> 
    ); 
    } 
    } 
}

来源

2017-09-14 11:28:46

问题是渲染只能返回一个父'div'没有兄弟姐妹。所以，我需要多个'div'或其他标签，有没有办法做到这一点？请检查修改后的问题。 – Syed

它不可能渲染必须有单个返回元素，但为什么你想这样做？ –

有一种情况，我最终会使用相同的包装器标记两次。我缺少vue.js，它有这个功能:) – Syed

你不能做到这一点（据我知道）。问题是React只接受1个元素，只能渲染1个元素。该元素可以拥有尽可能多的兄弟姐妹，这是由React.createElement（）的工作方式引起的。请记住，jsx <div> children </div>是createElement函数的糖语法。请参阅反应documentation了解更多详情

在您的具体情况中，您可以轻松解决这个问题的方法是分别渲染每个部分（这是它应该为Header，Content和Footer完成的方式））。

因此，为头部另一个内容和另一个页脚分别渲染它们，这样就不需要将它们全部放在一个组件中。

这很大程度上取决于您使用的框架。

来源

2017-09-14 11:44:31

不幸的是，这是React的工作原理。由于底层体系结构的原因，它期望为组件返回单个节点。

但是，此问题已在React社区中讨论过，并且现在有一个修复程序可用（版本号为16RC）。请参阅发行说明 - https://github.com/facebook/react/issues/10294。

可以升级到这个版本，并更改您的代码是这样的 -

return [ 
    <header>Header Content</header>, 
    <main>Content goes here</main>, 
    <footer>Footer Content</footer> 
];

虽然我还没试过此我自己，但你可以试试这个，并在此处详细了解关于这一问题的讨论 - https://github.com/facebook/react/issues/2127。希望这可以帮助。

来源

2017-09-14 11:45:10 codeslayer1

阵营JS：如何不要让标记在最终渲染

回答

相关问题