Question

我正在尝试＆＃34;保湿＆＃34;从元素到将要呈现的子组件的道具。问题是，我无法弄清楚如何使用我的配置来完成它。

我见过this answer，我试图改编它，但到目前为止我遇到了错误（见下）。

对于一些背景知识，我正在开发一个基于Rails的应用程序，它将React用作前端。所以我没有使用React路由器等，它只是显示＆＃34;数据。

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

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

我的问题是我想在我的＆＃34; front.js＆＃34;中进行Ajax调用。文件，然后传输接收的数据（这里，＆＃34;值＆＃34;）。我得到的错误如下：

未捕获错误：元素类型无效：需要一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。

我缺乏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,
};

如何将道具传递给变量？

1 个答案: