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

IT技术 javascript reactjs redux jsx
2021-04-26 06:22:56

我尝试制作我的“智能”弹出组件，它可以在自身内部打开一些组件，但我的实现并不好，因为它不起作用。

我使用 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>
    }
}
4个回答

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

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

同样为了得到我建议映射和迭代数组中的所有项目并在渲染方法中一一渲染它们

见下面的例子： 

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'));

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

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

<Popup><MyInnerComponent></Popup>

并在弹出render方法中

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

React 实际上允许您使用具有 JSX 语法的变量来实例化组件。您实际上应该能够调用<this.body />并使其工作；但是你的不会，因为你this.body直到componentDidUpdate方法才定义，这意味着它在第一次渲染时将是未定义的并破坏一切。我建议为此使用本地组件状态，而不是this.body确保它从一开始就定义。

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

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

您可以使用<this.body />来渲染组件，只要this.body具有实际值即可。也许你只需要：

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

但是，在您提供的示例中，您可以将内容放入componentDidMountin 中constructor，因为构造函数是在第一次渲染传递之前调用的。

其它你可能感兴趣的问题
上一篇如何将 .STL 文件转换为 .OFF 以在 CGAL 中使用？ 下一篇来自 Blender 的文件在 Shapeways 的预览中有所不同