Question

为React完成新手并试图找出如何为组件加载HTML而不是直接在render方法中插入它。例如

import React, {Component} from 'react';

export default class Login extends Component { 

  render() {
    return (
       <!-- how can I provide a link to the HTML template for here? -->
    );
  }
}

Answer 1

React没有HTML。您在render方法中编写的JSX实际上已编译为JavaScript。核心，React组件都是JavaScript。样式也是内联的。 React中的组件化很简洁，因为HTML，CSS，JavaScript（交互）都在一个地方，就像JavaScript一样。

要插入原始HTML，React具有属性dangerouslySetInnerHTML。

Integer i1 = -128; 
Integer i2 = -128; 
System.out.println(i1 == i2); // returns true

Answer 2

如果您想要某种类型的组织，可以使用变量来设置html，然后将其分配给渲染功能，但React不使用html模板

var hello = React.createClass({
    render: yourVariable
});

Answer 3

我认为你可能会对JSX如何工作感到困惑。以防万一，我想澄清JSX就是他们所谓的“语法糖”，它将React.createElement等React方法转换为类似XML的语法。例如：

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

（来自React docs）

所以，据我所知，JSX语法实际上属于render方法。如果您真正想要的是分离和重用纯表示代码的最佳方式，那么您应该阅读将应用程序分离为容器和演示组件

https://medium.com/@learnreact/container-components-c0e67432e005#.dzjqc8yrn https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6

Stateless / Presentational / Dumb组件只是返回JSX的函数。所以你可以拥有你的模板组件：

import React from 'react';
//you need to import React to use JSX, as it will be expanded into React.createElement calls...
function Template(props){
    return ( 
       //...your template here... 
     );
}

然后你的班级

import React, {Component} from 'react';

export default class Login extends Component { 

  render() {
    return (<Template {...props}/>);
  }
}
}

有道理吗？

React Components - 存储HTML模板的位置

3 个答案: