如何将新道具传递给渲染组件

Question

假设您有一个名为 Banner 的渲染组件；

var Banner = React.createClass({
  getInitialState: function() {
     return { text: this.props.word };
  },
  render: function(){
     return <div>this.state.text</div>
  }
}) 

var banner = ReactDom.render( <Banner word="hello" />, document.getElementById('banner'));

是否可以在不更换组件的情况下更新Banner的道具？例如下面的函数

function changeText(component, text){
    // change text inside banner
}
changeText(banner, 'Goodbye')

显然在这个例子中，用新文本重新初始化横幅会容易得多，但我希望横幅在文本更改时有动画，但在初始化时没有动画

Answer 1

您的示例有点过于简单化。您的实际问题可能有很多，但我会尝试一下最有可能发生的事情。

如果目标是修改 div 的内容，那么答案就是根本不使用道具。这正是您所在州的用途！

var Banner = React.createClass({
    render: function() {
        return <div>this.state.word</div>
    },
    getInitialState: function(){
        return {word: this.props.word};
    }

    changeWord: function(word){
        this.setState({word: word});
    }
});

编辑：

如果您尝试从页面其他地方嵌入的 vanilla js 修改组件：

我认为在这种情况下你最好的选择是利用一些（如果不是全部的话）Flux 设计模式：https://facebook.github.io/flux/docs/overview.html#content

如果不是整个 Flux 范例，您至少可以利用 Flux 处理 'Stores' 的方式，它们本质上只是 Node.js EventEmmiters：https://nodejs.org/api/events.html

var BannerStore = new EventEmmitter();

var Banner = React.createClass({
    render: function() {
        return <div>this.state.word</div>
    },
    getInitialState: function(){
        return {word: this.props.word};
    },
    changeWord: function(){
        this.setState({word: BannerStore.word});
    },

    componentDidMount: function(){
        BannerStore.on('banner_change', this.changeWord);
    },

    componentWillUnmount: function(){
        BannerStore.removeListener('banner_change', this.changeWord);
    }
});

function changeText(component, text){
    if(component === 'banner'){
        BannerStore.word = text;
        BannerStore.emit('banner_change');
    }
}
changeText(banner, 'Goodbye')

从长远来看，使用完整的通量范例会更清晰运行，但超出了合理输入 SO 的范围。

如何将新道具传递给渲染组件

how to pass new prop to rendered component

jsx

reactjs

react-jsx