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设计模式：How to perform batch update in Sql through C# code

如果不是整个Flux范例，你至少可以利用Flux处理的商店＆＃39; Stores＆＃39;这基本上只是Node.js EventEmmiters：https://facebook.github.io/flux/docs/overview.html#content

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中。

如何将新prop传递给渲染组件

1 个答案: