Question

编写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>
)

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

以下是我使用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：无法读取属性＆＃39; toArray＆＃39;未定义的。

Answer 1

它将由element.props.children提供。

像这样写：

function stripDivFrom(reactElement) {
    return reactElement.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'
  }
};

选中此项： What is props.children in react?

工作代码（包装器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'/>

工作小提琴：JSX Represents Objects

React - 如何从React.Component

1 个答案: