小编use*_*216的帖子

React v0.14支持纯功能组件(即相同的输入等于相同的输出).道具作为函数参数传入.

// Using ES6 arrow functions and an implicit return:
const PureComponent = ({url}) => (
  <div>
    <a href={url}>{url}</a>
  </div>
);

// Used like this:
<PureComponent url="http://www.google.ca" />

// Renders this:
<a href="http://www.google.ca">http://www.google.ca</a>

但是,如何渲染PureComponent的子代？在常规有状态组件中,您可以访问子项this.props.children,但这显然不适用于此处.

const PureComponent = ({url}) => (
  <div>
    <a href={url}>{children}</a> // <--- This doesn't work
  </div>
);

<PureComponent url="http://www/google.ca">Google Canada</PureComponent>

// I want to render this:
<a href="http://www.google.ca">Google Canada</a>

我该怎么办？

我是React的新手，仍然在学习。我正在尝试将数据从孩子传递给祖父母。到目前为止，我和父母接触，被困住了。

子组件：

export class Child extends React.Component{
  constructor(props) {
    super(props);
    this.state= {
      counterChild: 5
    }
  }

  render() {
    return(
      <div>
        <span>Child: {this.state.counterChild}</span><br />
        <button onClick={this.props.data(this.state.counterChild)}>Click me</button>
      </div>
    );
  }
}

父组件：

export default class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state= {
      counterParent: 0
    }
  }

  updateParent(value) {
    return() => {
      this.setState({
        counterParent: value
      });
    }
  }

  componentWillMount(){
    this.props.data(this.state.counterParent) 
  }

  render(){
    return(
      <div>
        <span>Parent: {this.state.counterParent}</span>
        <Child data={this.updateParent.bind(this)}/>
      </div>
    );
  }
}

在子组件中，我使用按钮，在这里我想我必须使用componentWillMount才能发送给祖父母..但它没有达到

祖父母组件：

export default class Grandparent extends React.Component{
  constructor(props){
    super(props); …