Question

我是reactjs的新手。我正在使用路由器并根据网址发送适当的孩子。以下是我的index.js的结构：

class Tj extends React.Component {
render() {
    return (
        <Router history={browserHistory}>
            <Route path={"/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"home"} component={Home} />
        </Router>
    );
}
}
 render(
  <Provider store={store}>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

到目前为止一切顺利。现在我需要让孩子们进入bridge.js并根据传递的子类型决定渲染的输出。

import React from "react";
import {Header} from "../components/Header";
export class Bridge extends React.Component {
render() {
    var Content;
    if(this.props.children.tag==="homeTag"){
    Content=<div>
        <div className="row">
            <Header/>
        </div>
        <div className="row">
            {this.props.children}
        </div>
    </div>;
      }else{
        some other code to render}

    return (

        Content

    );
}
}

此问题恰好在此时开始。所以在这里我检查我在index.js中发送的每个元素中设置的属性标记，例如Home.js，但是虽然我为组件设置了标签，但它是未定义的。以下是Home.js：

class Home extends React.Component {
render() {
    return (
        <div>
                <MainComp tag="homeTag"/>
          </div>
    );
   }
 }

正如你所看到的那样，我在Home.js中发送标签，但在我尝试阅读它时，在bridhe.js中它是未定义的。有人可以帮忙吗？

************* UPDATE ********************************* ********* 更多解释：我使用标签能够区分已发送的组件的类型。如果我把它命名为类型可能会更好。所以在bridge.js然后我检查组件的类型，如果它是例如Home组件我也显示标题，如果没有那么我只显示没有任何标题发送的组件。

Answer 1

我为此找到了一个解决方案，但我可能值得与任何遇到同样问题的人分享。我犯了一个愚蠢的错误。因此，不是检查从模板发送的子项，而是使用不同的模板定义不同的路径，例如：

<Router history={browserHistory}>
        <Route path={"/"} component={Bridge} >
            <IndexRoute component={Home} />
            <Route path={"user"} component={T} />
            <Route path={"home"} component={Home} />
        </Route>
        <Route path={"/"} component={Bridge2} >
            <IndexRoute component={Test1} />
        </Route>
        <Route path={"home"} component={Home} />
    </Router>

另外，欲了解更多信息，请查看此链接： related answer

我无法读取父母发送的孩子的属性

1 个答案: