react 组件什么时候可以用<>尖括号声明,什么时候只能{}声明

Question

const RenderComponent = props.render(value,handleChange)
    console.log(RenderComponent)
    return (
        <div>
            {RenderComponent}
        </div>
    )

代码如上,在renderprops里 只能用{}声明RenderComponent
而使用<RenderComponent>则会报错,
没有在官方文档里看到对应示例,有没有大神解答一下

Answer 1

props.render 如果返回的是 function 或者 class 就用 < RenderComponent />, 否则它返回的是一个已经声明的组件(也就是props.render里面通过 return (<...>) 这种形式返回的)，直接用 { } 取值。

Answer 2

我简单说下react中代码混编的方式

1.. 在js语法中绑定jsx

return <h1>hello world</h1>

2.. jsx标签中绑定j's语法

...省略有一万行代码<h1>{this.props.username}<h1>

另外jsx中也可以用jsx标签
如

     let selectList = this.state.supplierRoleList.map((val, index) => {
            return <Option value={val.name} key={val.id}>{val.name}</Option>
        })
     selectList = (
         <Select onSelect={this.handleSelect.bind(this)}>
             {selectList}
         </Select>
     )
        

反正就是这么个意思,在jsx(也即是标签)中内嵌jsx,总不能直接写个selectList这么个玩意吧,肯帝要包起来的