首页 文章

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

提问于
浏览 次
1

我正在尝试使用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 = <Unit /> 替换 Xxx = <this.props.onHex /> 时，它可以工作并渲染Unit的渲染功能 .

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

我的单位代码：

export default class Unit extends Component{

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

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

jsFiddle与另一个类似的问题http://jsfiddle.net/dhjxu5oL/

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

newExampleComponent() {
    return <ExampleComponent />;
}

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

1 回答

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

    例如，检查这个jsfiddle

    更新：

    根据React official docs

    您不能将通用表达式用作React元素类型 . 如果您确实想使用通用表达式来指示元素的类型，请先将其分配给大写变量 . 当你想根据道具渲染不同的组件时，通常会出现这种情况：

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

    再次更新

    似乎你想传递一个字符串，而不是对组件的引用 . 有一种肮脏的方式来做到这一点

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

    我创建了这个codepen进行测试

    回复于

相关问题