Question

我正在创建一个幻灯片轮播，我希望能够在我解析出的json文件中列出幻灯片组件并发送到父组件进行渲染。我可以看到它可以通过传递组件来完成，但我不确定如何将json从字符串解析为实际组件。

我的json是这样的：

{ "slides":
[
 {
  "id": "slide0",
  "title": "Slide: 0",
  "caption": "Slide caption: 0",
  "slideNum": 0,
  "url": "adminLogins",
  "slideType": "<AdminLoginsChart />"
},
...etc. json
]}

我可以将组件传递给另一个组件，如下所示：

<Slide component={this.state.slides[this.state.slideNum].slideType}/>

但是当我在json中将组件作为字符串引入时，我似乎无法将其转回到要传递的组件中。用任何内容替换引号都不起作用，并且执行JSON.parse（item）会给出json解析错误。有没有人尝试将字符串值作为组件传递并以某种方式将它们转换为组件？

Answer 1

你关闭了！如果你需要它在一个JSON文件中（所以是一个字符串），那么试试这个：

import YourComponent from './YourComponent';    

{
  slides: [{
    id: 'slide0',
    title: 'Slide 0',
    ...
    slideType: 'YourComponent',
  }],
}

然后，在<Slide />渲染中，您可以执行以下操作：

const components = [{ 'YourComponent': YourComponentReference }];

const Slide = ({
  component,
} => {
  const Component = components[component];
  return (
    <Component />
  );
});

Answer 2

如果您的组件存储在与Slide组件相同的文件夹中，则javascript文件大写（例如AdminLoginsChart.js），并且组件的名称在JSON文件中可用（例如＆＃34; slideType＆＃ 34;：＆＃34; AdminLoginsChart＆＃34;），然后您可以用这种方式编写Slide组件：

class Slide extends React.Component {

  render() {
    const { component, ...props } = this.props;
    const Component = require(`./${component}`).default;
    return (
      <div className="slide>
        <Component {...props} />
      </div>
    )
  }

}

如果文件名使用下划线，则可以使用lodash snakeCase函数将组件名称转换为文件名。

从json数据中将一个组件传递给另一个组件

2 个答案: