如何修改子组件内容？

Question

我有这样一个组件：

<MyTimer props={+new Date()}>
    <span className="year" formatter="yyyy" />
    <span className="mon" formatter="mm" />
    <span className="day" formatter="dd" />
</MyTimer>

MyTimer 是这样的组件（我只是忽略了一些其他代码）：

render() {
    /**
      * this code may not work, I just do what I think.
     */

    return (<div>
         { this.props.children.map((child, i) => 
             // child.children=[util.date(child.formatter)])
             // set child.props.children as "util.date(child.formatter)"
         }
    </div>)
}

我想更改组件中 span 的内容，结果应该是这样的：

<span class="year">2016</span>
<span class="mon">07</span>
<span class="day">06</span>

那么为什么我需要这个，因为我可以随心所欲地更改子元素类型：

<MyTimer props={+new Date()}>
    <div className="year" formatter="yyyy" />
    <span className="mon" formatter="mm" />
    <p className="day" formatter="dd" />
</MyTimer>

就是不关心子元素是什么，还有className.

Answer 1

React 有一个名为 "contexts" 的功能，它允许父组件隐式地将一些数据传递给子组件。

然后实际的格式化可以发生在特殊的 "formatter" 组件中。结果是这样的：

import React, { Component, PropTypes } from 'react';
import moment from 'moment';

class MyTimer extends Component {
    static childContextTypes = {
        date: PropTypes.object
    };

    // expose some props to children
    getChildContext() {
        return {
            date: this.props.date
        };
    }

    render() {
        return <div>{this.props.children}</div>;
    }
}

class TimerPart extends Component {
    // this is REQUIRED to receive the date from the parent
    static contextTypes = {
        date: PropTypes.object
    };

    render() {
        // use it like `this.context.date`
        return <span>{moment(this.context.date).format(this.props.format)}</span>;
    }
}

export default class App extends Component {
    render() {
        return (
          <MyTimer date={new Date()}>
            <TimerPart format="YYYY"/>
            <TimerPart format="MM"/>
            <TimerPart format="DD"/>
          </MyTimer>
        )
    }
}

如何修改子组件内容？

How to modify child Component content?

javascript

reactjs

react-jsx