как передать новую опору для визуализированного компонента

Question

сказать, что у вас есть рендер-компонент с именем 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}); 
    } 
}); 

EDIT:

Если вы пытаетесь изменить компонент из ванили JS внедренный в другом месте на странице:

Я думаю, что вам лучше всего в этом случае было бы использовать некоторые (если не все) из Flux шаблона дизайна: https://facebook.github.io/flux/docs/overview.html#content

Если не весь Flux парадигмы, вы могли бы по крайней мере, использовать пути потока обрабатывает «Магазины», которые являются по существу только 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.