Javascript 如何将道具传递给变量？

我正在尝试从元素到将渲染的子组件的“水合物”道具。问题是我不知道如何使用我的配置来实现它

我已经看到，我试图适应它，但到目前为止，我得到了错误（见底部）

作为一个背景，我正在开发一个基于Rails的应用程序，前端使用React。所以我不使用React路由器之类的，它只是“显示”数据

以下是我如何设置一切：

front.js（在其中渲染所有内容）

home/home.js

import React from 'react';
import Homeindex from '../home/home';
import Contact from '../home/contact';

// This files create an associative array with id React will be
// looking for as a key and the component as value

export const elementForActionName = {
    'index': <Homeindex />,
    'contact': <Contact/>,
};

export default function extractActionName() {
  // The body contains classes such as "home index", so
  // I return the "action name" of my controller (home) to
  // front.js so I will render the good component

  return document.body.className.split(' ').pop();
}

import React from 'react';
import Header from '../layout/header';
import Footer from '../layout/footer';

export default class homeIndex extends React.Component {
  render() {
    return(
      <div>
        <Header/>
        <h1>Hello this will be the content of the landing page hello</h1>
        <Footer/>
      </div>
    )
  }
}

从“React”导入React；
从“../layout/Header”导入标题；
从“../layout/Footer”导入页脚；
导出默认类homeIndex扩展React.Component{
render（）{
返回(
您好这将是登录页的内容您好
)
}
}

我的问题是，我想在我的“front.js”文件中调用Ajax，然后传输接收到的数据（这里是“value”）。我得到的错误如下：

未捕获错误：元素类型无效：应为字符串（对于 内置组件）或类/函数（用于复合组件） 但我得到了一个目标

我缺乏反应方面的经验，如何解决这个问题

---

提前感谢。

您当前正在返回组件的实例：

export const elementForActionName = {
    'index': <Homeindex />, <--- here
    'contact': <Contact/>,
};

---

您当前正在返回组件的实例：

export const elementForActionName = {
    'index': <Homeindex />, <--- here
    'contact': <Contact/>,
};

---

哎呀，我忘了编辑它，不，它没有，我在写问题的时候还在努力使它功能化，我忘了编辑它。你确定你的extractActionName（）返回了什么吗？是的，到目前为止，如果我将

Element

更改为

Element

，并且我只是按原样呈现变量，而没有

value={value}

或HTML标记，一切都正常fineoops，我忘了编辑它，不，它没有，我在写问题时还在努力使它正常工作，我忘了编辑它你确定你的extractActionName（）返回了什么吗？是的，到目前为止，如果我将

Element

更改为

Element

，并且我只是在没有

value={value}

或HTML标记的情况下按原样呈现变量，那么一切都很好。谢谢，这比我想象的要简单！！谢谢，这比我想象的要容易多了！！

let renderElement = function (Element, id) {
    ReactDOM.render(
        <Element value={value} />,  // <--- here
        document.getElementById(id)
    );
};

export const elementForActionName = {
    'index': Homeindex,
    'contact': Contact,
};