不建议使用style进行样式的控制，可以定义.topic-intro-extended来修改max-height为auto, .fold也是同理

var Component = React.createClass({
  getInitialState:function(){
    return {
      topicExtended:false
    }
  },
  toggleClickHandler:function(){
    this.setState({
      topicExtended:!this.state.topicExtended
    });
  },
  render:function(){
    var topicCls = "topic-intro";
    var foldCls = "";
    if(this.state.topicExtended){
      topicCls+=" topic-intro-extended";
      foldCls+="fold";
    }
    return (
      <p>
        <p className="topic-content">
          <p className={topicCls}>blablabla</p>
          <p className={foldCls}>blablabla</p>
        </p>
        <p className="toggle-btn" onClick={this.toggleClickHandler}>click me</p>
      </p>
    )
  }
});

另外，对className的控制，建议使用classnames包

因该是类似文章简介和点击阅读全文后展开全文的效果吧。这个要在state上设置一个属性，在需要改变的地方引入getState，然后通过绑定按钮（数字1标示按钮）改变state这个属性。如果用的是redux的话也差不多

仿照下面这个 给你要改变的组件加个style ,里面可以有类似display:{block}这样的属性
然后在需要点击的组件那里加个onClick事件,进行触发修改相应组件的style。

var pStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<p style={pStyle}>Hello World!</p>, mountNode);

https://facebook.github.io/re...

最终解决的思路就是通过redux去控制state的状态，从而达到隐藏显示的效果，例如本题的示例：

action的设计思路是:
export const toggle = (state = [], action) => {
    switch (action.type) {
        case 'expand':
            let newState = [].concat(state);
            newState[action.id] = !newState[action.id];
            return newState
        default :
            return state
    }
}
通过数组的真假控制topic-content,fold,toggle-btn状态的改变；

添加对toggle-btn的事件监听：
    toggleFont(id) {
        let dispatch = this.props.dispatch;

        dispatch({
            type: "expand",
            id: id
        })
    }
    //传递点击时的id值

这样，每次点击时就改变了state的状态，从而实现了显示隐藏效果。