Question

我正面临这个错误var helloworld不打印？
h2不打印你好世界只有h1正在打印helloword 2次为什么var不打印???? 两个如何将两个组件组合在一起？

  var h2=React.createElement('h2',null,'Hello World')
    ReactDOM.render(
        h2,document.getElementById('content')
    )

    //but this code is not printing hello world ?


    let h1=React.createElement('h1', null, 'Hello World')
    class HelloWorld extends React.Component {
        render(){
            return React.createElement('div',null,h1,h1)
        }
    }

    ReactDOM.render(
        React.createElement(HelloWorld, null),
        document.getElementById('content')
    )
    //this code is printing  two times hello world

Answer 1

var h2=React.createElement('h2',null,'Hello World')
    ReactDOM.render(
        h2,document.getElementById('content')
    )

这种方法适合我。

对于第二种方法，您将两个h1组件作为子组件传递给新创建的组件。 React.cloneElement( element, [props], [...children] )。因此，两个h1呈现为儿童。

要同时呈现h1和h2，请尝试以下

var h2=React.createElement('h2',null,'Hello World')
let h1=React.createElement('h1', null, 'Hello World')

class HelloWorld extends React.Component {
  render(){
    return React.createElement('div',null,h2,h1)
  }
}

ReactDOM.render(
  React.createElement(HelloWorld, null),
  document.getElementById('container')
)

JSFiddle https://jsfiddle.net/q0weL46u/

React.creatElement是一种古老的方式。我建议使用JSX来描述您的组件。如下所示

https://jsfiddle.net/j5wj7kfn/

如何渲染var？或两个组件在一起？ var输出未显示

1 个答案: