Question

我正在尝试使用react开发一个Web应用程序，我有一个问题。我的组件得到一个“存在的组件名称”，我尝试在当前组件的render函数中呈现这个新组件。

我当前的组件渲染功能

render(){

    let Xxx = null;
    if( this.props.onHex ){
      console.log( this.props.onHex );
      Xxx = <this.props.onHex />
    }

    return(
        <div className="myClass">
            <div className="anotherClass">
               {Xxx}
            </div>
        </div>
    );
  }
}

它对我不起作用，控制台日志返回新组件“Unit”的名称。当我用Xxx = <this.props.onHex />替换Xxx = <Unit />时，它可以工作并渲染单位的渲染功能。

看起来反应无法识别<Unit/>作为组件。我做错了，请指教。

我的单位代码：

    export default class Unit extends Component{

    render(){
        return(
            <div>test</div>
        );
    }
}

更新：当我使用const XxxName = Unit; Xxx = <XxxName />;它对我有用但我想能够从字符串渲染组件（我从json得到这个字符串）。我想我可以在这种情况下在文件中创建所有可能的组件将它们加载到数组或其他东西并通过字符串获取它们但是它不是可以存在的东西我有很多组件可能如果我将如何加载它们单独的文件夹（每个组件的单个文件）它将是一半的解决方案。但我仍然在寻找如何从字符串加载组件。

js表示另一个类似的问题http://jsfiddle.net/dhjxu5oL/

更新2：我没有找到优雅的方式达到我的目标（我不确定它是否存在）现在我正在使用每个动态组件的方法，希望有人会告诉我更优雅的解决方案。检查一下：React / JSX Dynamic Component Name

newExampleComponent() {
    return <ExampleComponent />;
}

newComponent(type) {
    return this["new" + type + "Component"]();
}

Answer 1

let Xxx = null;
if( this.props.onHex ){
  const XxxName = this.props.onHex;
  Xxx = <XxxName />;
}

例如检查jsfiddle

更新：

根据React official docs

您不能将通用表达式用作React元素类型。如果你我想使用一般表达式来表示类型 element，首先将它分配给大写变量。经常这样当你想基于a渲染不同的组件时出现丙

因此，您需要首先将this.props.onHex分配给CAPITALIZED变量，然后才能使用它。

再次更新

似乎要传递字符串，而不是对组件的引用。有一种肮脏的方法

const xxx = this.props.onHex || "";
const XxxComp = eval(xxx);
...
return (<XxxComp />);

我为测试创建了此codepen

react - 渲染动态组件内部渲染功能的其他组件

1 个答案: