我试图做一个Main组件(在示例中为Container),该示例可以将内部组件保持为可选状态(在示例中,条件为true)。

我需要从React.Component扩展的内部组件,我不能像函数一样使用它:const ChildOne = (.... )

有2个子组件,其想法是使用更多子组件。

但是,我不能,渲染内部组件时出现错误:


  函数作为React子代无效。如果您可能会发生这种情况
  返回一个Component而不是从render返回。也许你
  意味着调用此函数而不是返回它。


class ChildOne extends React.Component {
    render() {
        return (
            <div>
                <p> Child One </p>
            </div>
        )
    }
}

class ChildTwo extends React.Component {
    render() {
        return (
            <div>
                <p>Child Two</p>
            </div>
        )
    }
}

class Container extends React.Component {
    render() {
        let condition = true;   //Just for testing purpose

        let comp = null;
        if (condition)
            comp = ChildOne;
        else
            comp = ChildTwo;

        return (
                <main>
                    {comp}
                </main>
        )
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <div><Container /></div>
            </div>
        )
    }
}


https://jsfiddle.net/01L8amgs/

我没办法了...先谢谢了。

最佳答案

您应该使用大写字母,以将React自定义组件分配给变量。像Comp = ChildOne;Comp = ChildTwo ..然后只要<Comp />

User-Defined Components Must Be Capitalized


  当元素类型以小写字母开头时,它指的是
  内置组件(例如或),并导致字符串“ div”
  或“ span”传递给React.createElement。以a开头的类型
  大写字母,例如编译为React.createElement(Foo)和
  对应于在JavaScript文件中定义或导入的组件。
  
  我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件,请将其分配给
  在JSX中使用大写变量之前。




class ChildOne extends React.Component {
  render() {
    return (
      <div>
        <p> Child One </p>
      </div>
    );
  }
}

class ChildTwo extends React.Component {
  render() {
    return (
      <div>
        <p>Child Two</p>
      </div>
    );
  }
}

class Container extends React.Component {
  render() {
    let condition = true; //Just for testing purpose

    let Comp = null;
    if (condition) Comp = ChildOne;
    else Comp = ChildTwo;

    return (
      <main>
        <Comp />
      </main>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <Container />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<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="root"></div>

关于javascript - 在React组件中选择内部组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52235580/

10-12 12:47
查看更多