javascript - 如何将 props 传递给变量？

Question

我正在尝试从元素到将渲染的子组件的“水合” Prop 。问题是我不知道如何使用我的配置来做到这一点。

我见过this answer ，我尝试对其进行调整，但到目前为止我遇到了错误(见底部)。

为了了解一些背景知识，我正在开发一个基于 Rails 的应用程序，该应用程序使用 React 作为前端。所以我不使用 React router 之类的，它只是“显示”数据。

以下是我设置一切的方法:

front.js(所有内容都在此渲染)

import React from 'react';
import ReactDOM from 'react-dom';
import extractActionName from './lib/extractActionName';
import {elementForActionName} from './lib/elementForActionName';
import 'jquery';
import 'popper.js';
import 'bootstrap';

let actionName = extractActionName();
let value = "value";

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

renderElement(elementForActionName[actionName], actionName);

lib/elementForActionName.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/>,
};

lib/extractActionName.js

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();
}

home/home.js

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>
    )
  }
}

我的问题是我想在“front.js”文件中进行 Ajax 调用，然后传输接收到的数据(此处为“值”)。我收到的错误如下:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我缺乏 React 经验，如何解决这个问题？

提前谢谢您。

Answer 1

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

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

然后尝试再次实例化它:

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

相反，只需使用组件类:

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