在 React 组件中选择内部组件答案

【问题标题】：Select Inner component in a React Component在 React 组件中选择内部组件
【发布时间】：2023-04-07 17:44:01
【问题描述】：

我正在尝试做一个 Main 组件（在示例中为 Container），它可以容纳可选的内部组件，在示例中是硬编码的（条件设置为 true）。

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

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

但是，我不能，我在渲染内部组件时出错：

函数作为 React 子级无效。如果您可能会发生这种情况返回一个组件而不是从渲染。或者也许你意味着调用这个函数而不是返回它。

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/

我的想法已经用完了...在此先感谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您应该使用大写字母，将 React 自定义组件分配给变量。喜欢Comp = ChildOne; 或Comp = ChildTwo.. 然后就做<Comp />

来自User-Defined Components Must Be Capitalized：

当一个元素类型以小写字母开头时，它指的是一个内置组件，如 or 并导致字符串 'div' 或“跨度”传递给 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>

【讨论】：

这么简单！！我觉得自己像个笨蛋。谢谢！！

【解决方案2】：

您需要使用正确的语法渲染组件：<Comp> 而不是 {comp}

这是一个工作示例：https://jsfiddle.net/01L8amgs/2/

注意 Container 类的渲染函数为此改变了

class Container extends React.Component {
  render() {
      let condition = false;

      let Comp = null;      <===== Uppercased variable name
      if (condition) 
        Comp = ChildOne; 
      else
        Comp = ChildTwo; 

      return (
        <nain>
          <Comp />          <===== Render as component    
        </nain>
      )
  }
}

【讨论】：