React,基于prop的不同模板

时间:2016-12-06 21:10:42

标签: javascript reactjs ecmascript-6 jsx

假设我得到了以下的休息回复:

"xxx.function.classes": [
"com.xxx.xxx.service.dal.functions.Alarm",
"com.xxx.xxx.service.dal.functions.BooleanControl",
"com.xxx.xxx.service.dal.functions.BooleanSensor",
"com.xxx.xxx.service.dal.functions.ColorControl",
"com.xxx.xxx.service.dal.functions.Keypad",
"com.xxx.xxx.service.dal.functions.MediaControl",
"com.xxx.xxx.service.dal.functions.Meter",
"com.xxx.xxx.service.dal.functions.MultiLevelControl",
"com.xxx.xxx.service.dal.functions.MultiLevelSensor",
"com.xxx.xxx.service.dal.functions.VolumeControl",
"com.xxx.xxx.service.dal.functions.WakeUp"
]

我想为我的组件中的不同类渲染不同的标记..

import React from 'react'
import { connect } from 'react-redux'
import {triggerFBEvent, triggerFBClearEvent} from '../actions/functionblocksActions'


// @connect((store) => {
//   return {
//     fbs: store.functionblocks.functionblocks
//   }
// })
export default class Functionblock extends React.Component {

  constructor(props) {
    super(props);
      this.state = {

    };
    this._getType = this._getType.bind(this)

  }


  render() {
    let functionType = <FunctionType />;

      return( 



      <div className="switch clearfix">
        {functionType}
        <span>{this.props.fbName}</span>
        <input id={this.props.fbID} className="toggle toggle-round" type="checkbox" checked={this.props.power} />
        <label htmlFor={this.props.fbID} data-on="Yes" data-off="No"></label>
      </div>
      )
  }
}

我将如何做到这一点?是开关的方式吗?或者组件中的不同类适用于所有不同的变体?我想根据我在道具中得到的反应来获得不同的标记。

有人可以帮我举个例子吗?非常感谢。

0 个答案:

没有答案