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"的功能，它允许父组件隐式地将一些数据传递给子组件。

然后，实际的格式化可以在一个特殊的＆＃34;格式化程序＆＃34;零件。导致这样的事情：

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>
        )
    }
}

如何修改子组件内容？

1 个答案: