React中的组件固定信息放在哪个位置

Question

最近写了好多小组件，用于重复使用，但是每个组件的标题等都不一样，还要在使用组件时设置一下defualt值，当然这个里边的内容是不变的，我把它们放在了constructor里用this分别声明了对象，感觉不是很好，请问大家你们的组件固定信息和绑定的事件等都放到哪里了呢？

Answer 1

看你是怎么写的。

如果是组件内部，且不需要外部更新

那么有两个地方可以是使用的。
如果你使用的是:React.createClass 这种情况，你可以直接写在getDefaultProps或getInitialState中
eg：

import React from 'react';

const Contacts = React.createClass({

getInitialState (){
/**its u code **/
}
  getDefaultProps() {
   /**its u code **/
  },
  render() {
    return (
      <div></div>
    );
  }
});

export default Contacts;

如果是使用的extends React.Component 则可以写在对象的defaultProps或constructor中，如下：

import React from 'react';

class Contacts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
/**its u code **/
    };
  }
  render() {
    return (
      <div></div>
    );
  }
}
Contacts.defaultProps = {
/**its u code **/
};

export default Contacts;

他们的效果是一样的。只是不同的写法而已。
另外就是，如果你的这些属性，需要被外部更改，那么则通过props进行更新。

以上。

参考
React.createClass与React.Component的却别

Answer 2

举个栗子`

const child = React.createClass({
    onClick(){
        alert("child");
        if(!!this.props.onClick)
        this.props.onClick();
    },
    render(){
        return (
            <div onClick={this.onClick} defaultValue={this.props.defaultValue}></div>
        )
    }
})

父组件中调用

...
onClick(){
    alert("father");
},
render(){
    return(
        <div>
            <child defaultValue="默认值" onClick={this.onClick} />
        </div>
    )
}
...