Question

我正在研究Meteor + React项目。请原谅我在这里听到一个小菜鸟，但我需要一些动态调用React组件的帮助。例如，我有三个组件<ComponentA />，<ComponentB />和<ComponentC />。但是，我想动态渲染它们;

var comp = /*some function that brings a string here*/; // this variable 'comp' could 
//be either of the ComponentA, ComponentB and ComponentC.

将此comp变量作为反应组件呈现的最佳方法是什么？

以下是系统的工作方式：

if (Meteor.isClient) {
    WelcomeComponent = React.createClass({
        render() {
            return <div><h1>Hello, {this.props.name}</h1></div>
        }
    });

    GoodbyeComponent = React.createClass({
        render() {
            return <div><h1>Bye Bye, {this.props.name}</h1></div>
        }
    });

    MainLayout = React.createClass({
      render() {
        return <div>
          <header>
            This is our header
          </header>
          <main>
            {this.props.content}
          </main>
          <footer>
            This is our footer
          </footer>
        </div>
      }
    });
    if (login){
        var comp = 'WelcomeComponent';
    }else{
        var comp = 'GoodbyeComponent';
    }

    // I want above 'comp' variable to be used for rendering/loading/producing respective component

    ReactLayout.render(MainLayout, {content:<WelcomeComponent name="Kavish"/>})
    // ReactLayout.render(MainLayout, {content:<GoodbyeComponent name="Kavish"/>})
}

comp变量可以是任何一个组件＆＃39;字符串格式的名称。请告知如何使用变量comp。

调用函数来加载所需的组件

Answer 1

React具有createElement方法来动态创建元素。该方法有三个参数。类型，道具和儿童。

这是抽象：

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

以下是用法：

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
ReactDOM.render(root, document.getElementById('example'));

有关详细信息，请访问：https://facebook.github.io/react/docs/top-level-api.html

Answer 2

您可以将className渲染为：

var comp = this.props.type; // should be string
var actualComponent = window[comp];

现在，如果您使用ReactLayout，请使用：

ReactLayout.render(actualComponent, {... your props here});

Answer 3

您可以在类和类的构造函数中设置状态变量：

import Foundation


let animals = [
    ListOfAnimals(name: "Cow",
        shortDescription: "Cattle",
        longDescription: "A cow is a mature female and bull of an adult male of a bovine family. A heifer is a female cow that hasn't had a calf yet. Cattle is the name for the whole cow family. THere are about 920 different breeds of cows in the world."),

    ListOfAnimals(name: "Bird",
        shortDescription: "Usually small, has wings, feathers, and can fly.",
        longDescription: "A warm-blooded egg-laying vertebrate distinguished by the possession of feathers, wings, and a beak and (typically) by being able to fly."),

    ListOfAnimals(name: "Dolphin",
        shortDescription: "A large fish",
        longDescription: "A small gregarious toothed whale that typically has a beaklike snout and a curved fin on the back. Dolphins have become well known for their sociable nature and high intelligence."),

    ListOfAnimals(name: "Dog",
        shortDescription: "Man's best friend",
        longDescription: "A domesticated carnivorous mammal that typically has a long snout, an acute sense of smell, and a barking, howling, or whining voice. It is widely kept as a pet or for work or field sports."),

    ListOfAnimals(name: "Zebra",
        shortDescription: "A horse with white and black stripes",
        longDescription: "an African wild horse with black-and-white stripes and an erect mane."),

]

class ListOfAnimals
{


    var name: String
    //var type: Type
    var shortDescription: String
    var longDescription: String

    init(name: String, shortDescription: String, longDescription: String)
    {
        self.name = name
        self.shortDescription = shortDescription
        self.longDescription = longDescription
    }

}

然后在父组件中，在if (typeof this.state == 'undefined') { this.state = { componentsToRender: <div></div> }; }函数中：

componentDidMount()

在reactjs中渲染变量组件名称

3 个答案: