Question

我试图让我的＆＃34;智能＆＃34;弹出组件，它可以在其自身内部打开一些组件，但我的意识并不好，因为它不起作用。

我使用redux方法创建弹出窗口，打开弹出窗口的操作能够在弹出窗口打开之前获取任何组件的名称;

但是我遇到了一些问题，在获取参数后，在我们的情况下它是 nameOfComponent ，我需要选择并呈现名称为 nameOfComponent 的组件

现在我的问题是，它如何从数组中呈现组件？

// He's my components
import Login from '../Login/login.js';
import Logout from '../Logout/logout.js';


const popupContent = {
    Login : Login,
    logout: Logout
};

// My component 
class Popup extends Component {

    componentDidUpdate () {
        // for example
        const nameOfComponent = "Login";

        this.body = this.setBodyPopup(nameOfComponent);

        return true;
    }

    setBodyPopup(property){
         return popupContent[property];
     }


    render() {
        // I want to render some element from popupContent here
        <div>
            // <this.body /> // it's jsx format
            {this.body}
        </div>
    }
}

Answer 1

我在这里添加了工作示例JSfiddle ReactJS

你不必使用JSX。如果你这样做，正确的方法是使用工厂。您还可以在render方法中呈现常规HTML，以及使用大括号在代码中使用vanilla javascript。

另外，我建议映射并迭代数组中的所有项目，并在render方法中逐个渲染它们

见下面的例子：

var Login = React.createClass({
  render: function() {
    return <div>{this.props.name}, logged in</div>;
  }
});

// React with JSX
ReactDOM.render(<Login name="John" />,
  document.getElementById('containerJSX'));

// React without JSX
var Login = React.createFactory(Login);
ReactDOM.render(Login({ name: 'Tim' }),
  document.getElementById('containerNoJSX'));

Answer 2

正如评论员所建议的那样，您可能希望在构造函数中或在render方法本身中指定this.body。

但是，如果我理解您的意图正确，您可以使用this.props.children代替。例如。

<Popup><MyInnerComponent></Popup>

并在Popup render方法

中

render() {
    <div>
        {this.props.children}
    </div>
}

Answer 3

React实际上允许您使用带有JSX语法的变量来实例化组件。你实际上应该能够打电话给<this.body />并让它发挥作用; 然而你的不会因为你没有在this.body方法之前定义componentDidUpdate，这意味着它将在第一次渲染时未定义并且会破坏所有内容。我建议使用本地组件状态代替this.body，并确保从一开始就定义它。

至少，在构造函数中将this.body实例化为某个值：

constructor(props) {
    super(props);
    this.body = 'Login';
}

Answer 4

只要<this.body />具有实际值，您就可以使用this.body呈现组件。也许你只需要：

render() {
    return <div>
        {this.body ? <this.body /> : null}
    </div>
}

但是，根据您提供的示例，您可以将componentDidMount的内容放在constructor中，因为构造函数是在第一次渲染过程之前调用的。

Answer 5

我认为你正在寻找像dangerouslySetInnerHtml这样的东西。

<div dangerouslySetInnerHTML={this.body} />

如何在没有jsx格式的情况下渲染反应组件？

5 个答案: