Обновление состояния, но не повторное рендеринг в ReactJS?

Question

Я очень новый, чтобы реагировать, и я просто мокрыю. Мне сложно понять, почему это не повторяет список. Вот мой код:

app.jsx

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { 
     links: ['test '] 
    } 
    }, 
    render: function() { 
    return <div className = "row"> 
     <Submission linkStore = {this.state.links}/> 
     <List links = {this.state.links} /> 
    </div> 

    } 
}); 

var element = React.createElement(Hello, {}); 
ReactDOM.render(element, document.querySelector('.container')); 

В моей submission.jsx У меня есть эта функция, чтобы выдвинуть данные в links массив

handleSubmitClick: function() { 
    this.props.linkStore.push(this.props.text) 
    this.setState({text: ''}) 
    console.log(this.props.linkStore) 
    } 

Мой list.jsx выглядит следующим образом

module.exports = React.createClass({ 
    getInitialState: function() { 
    return { 
     links: this.props.links 
    } 
    }, 
    render: function() { 
    return <div> 
     {this.props.links} 
    </div> 
    } 
}); 

Все работает по назначению, и я могу получить тест, чтобы показать его соответствующим образом ,

Я знаю, что это не будет отображаться как фактический список и что я должен создать компонент списка, чтобы отображать элементы в форме списка. Я просто пытаюсь запустить тесты, чтобы посмотреть, как все работает.

Answer 1

Использовать родителя state вместо ребенка props.

попробовать этот

app.jsx

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { 
     links: ['test '] 
    } 
    }, 
    handleListSubmitClick: function(params) { 
     this.setState({links:params}); 
    }, 
    render: function() { 
    return <div className = "row"> 
     <Submission linkStore = {this.state.links} handleListSubmitClick={this.handleListSubmitClick}/> 
     <List links = {this.state.links} /> 
    </div> 

    } 
}); 

submission.jsx

handleSubmitClick: function() { 
    var linkStore = this.props.linkStore; 
    linkStore.push(this.props.text) 
    this.setState({text: ''}) 
    this.props.handleListSubmitClick(linkStore); 
    } 

, но я не понимаю this.props.text. значение ввода, используя this.refs. ref

list.jsx

module.exports = React.createClass({ 
    getInitialState: function() { 
    return { 
     links: this.props.links 
    } 
    }, 
    render: function() { 
    return <div> 
     {this.props.links} 
    </div> 
    } 
});