react的案例疑惑

其實就是this.props.setting.component是一個由父組件傳下來的組件

//這是一個函數(shù)
function f(a, b){
  return a + b;
}

f(1, 2) // 3

// 這是一個接受函數(shù)的函數(shù)：
function f(fn, a, b){
  return fn(a, b);
}

var add = function (a, b) { return a + b;}
f(add, 2, 3); // 5

組件是一回事：

//這是一個組件
class A extends React.Component {
  render() {
    return <div>{this.props.hello}</div>
  }
}

// <A hello="hi"></A>  
// render =>
// <div>hi</div>

//寫一個接受組件為 props 的組件
class B extends React.Component {
  render () {
    var c = this.props.component;
    // 和 vue 不同的是，組件并不需要注冊，組件名只要是當(dāng)前作用域下可用的變量就行
    // 所以直接 <this.props.component></this.props.component> 也是可以的
    // 因為 jsx 翻譯后就是 createElement(component, props, children)
    return <c {...this.props}></c>
  }
}

// <B component={A} hello="what's up!"></B>
// render =>
// <div>what's up/div>

其實這個例子用高階組件更合適的。