繁体   English   中英

React - 如何从React.Component中删除顶级div

[英]React - How can I strip top level div from a React.Component

在编写JSX时,我有时需要创建一个顶级元素,以便代码编译。 例如,这不会编译。

const routesList1 = (
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
)

但这会:

const routesList1 = (
  <div>
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
  </div>
)

通常在<div>中包装其他React元素可以正常工作,但并非总是如此。 所以我想知道我是否被迫创建一个顶级元素来编译代码,我以后可以将其删除吗? 如果是这样的话?

下面是我使用React路由器的Switch元素遇到的问题的概念性示例。

import react from 'react';
import { Route, Switch } from 'react-router-dom';

const routesList1 = (
  <div>
    <Route exact path="/link1" component={Link1UI}/>
    <Route exact path="/link2" component={Link2UI}/>
  </div>
)

const routesList2 = (
  <div>
    <Route exact path="/link3" component={Link3UI}/>
    <Route exact path="/link4" component={Link4UI}/>
  </div>
)

function stripDivFrom(reactElement) {
    reactElement.Children.toArray();
}

class MyApp extends React.Component {
    render() {
        return (
            <Switch>
                {stripDivFrom(routesList1)}
                {stripDivFrom(routesList2)}
                <Route exact path="/help" component={HelpUI}/>
            </Switch>
        );
    }
}

我提供了这个简化的示例代码,以便读者可以理解我在问什么。

我希望得到一个问题的答案,而不是一个解决方案。

问题是:如何获得给定react / JSX元素的子元素? 如何更改stripDivFrom()函数以使其正常工作。

注意:stripDivFrom()函数当前不起作用。 Children属性未定义(当我在Chrome调试器中观察它时)。 我在查看React源代码时发现它,但我显然误解了一些东西。 浏览器控制台有一个错误,指出:Uncaught TypeError:无法读取未定义的属性'toArray'。

它将由element.props.children

写这样:

function stripDivFrom(reactElement) {
    return reactElement.props.children;
}

什么是props.children反应?

在包含开始标记和结束标记的JSX表达式中,这些标记之间的内容作为特殊prop:props.children传递

React元素基本上是对象,请查看此示例:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

由react创建的对象将是:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

检查一下: JSX代表对象

工作代码(包装器div上的样式不会反映在ui中):

 const hello = <div style={{color:'red'}}><div>Hello</div><div>World</div></div> class Game extends React.Component { a(el){ return el.props.children; } render() { return ( <div id="game-layout"> {this.a(hello)} </div> ); } } ReactDOM.render( <Game/>, document.getElementById('container') ); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id ='container'/> 

工作小提琴: https//jsfiddle.net/mayankshukla5031/0cwueg7j/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM