私はRailsアプリケーションを実行しており、ビューに対してReactを使用しています。私の主なコンポーネントでは、Railsオブジェクトが空であるかどうかを調べています。空の場合は、コンポーネントが1つ表示されます。オブジェクトが空でない場合、別のコンポーネントが表示されます。論理チェック後のリアクションで自動リフレッシュする方法
if (this.props.projects.length > 0){
var projectList = <Project_list projects={this.state.projects} /> }
else {
var projectList = <Noproject />
}
これは正常に動作しますが、私はその最初の新しいプロジェクトを作成し、それをオブジェクトに追加されますと、私はページをロードするために他のコンポーネントを取得するための非常に最初の時間をリフレッシュする必要があります。その後、Reactロジックは、リフレッシュすることなく、表示されたリストにオブジェクトを動的に追加します。
ページを更新する必要はありませんか、自動ページリフレッシュすることなく、他のコンポーネントをロードする別の方法があるので、あなたはこのロジックチェックを実行する方法をclass Projects extends React.Component {
constructor(props) {
super(props)
this.state = {
projects: this.props.projects,
project_name: '',
project_zipcode: '',
project_timeframe: '',
project_supplier: '',
showModal: false
}
}
openModal =() => {
this.setState({
showModal: true
});
}
closeModal =() => {
this.setState({
showModal: false,
project_name: '',
project_zipcode: '',
project_timeframe: '',
project_supplier: ''
});
}
handleUserInput(obj) {
this.setState(obj);
}
handleFormSubmit() {
const project = {
name: this.state.project_name,
zipcode: this.state.project_zipcode,
timeframe: this.state.project_timeframe,
supplier: this.state.project_supplier
};
$.post('/projects',
{project: project})
.done((data) => {
this.addNewProject(data);
});
this.setState({
showModal: false
})
}
addNewProject(project){
const projects = update(this.state.projects, { $push: [project]});
this.setState({
projects: projects.sort(function(a,b){
return new Date(b['updated_at']) - new Date(a['updated_at']);
})
});
this.setState({
project_name: '',
project_zipcode: '',
project_timeframe: '',
project_supplier: ''
})
}
render() {
if (this.props.projects.length > 0){
var projectList = <Project_list projects={this.state.projects} /> }
else {
var projectList = <Noproject />
}
return (
<div>
<h2>Start a New Project</h2>
<Button
bsStyle="success"
bsSize="large"
onClick={this.openModal} >
Create a New Project
</Button>
<Modal show={this.state.showModal} onHide={this.closeModal}>
<Modal.Header closeButton>
<Modal.Title>Create a New Project</Modal.Title>
</Modal.Header>
<Modal.Body>
<Project_form
project_name={this.state.project_name}
project_zipcode={this.state.project_zipcode}
project_timeframe={this.state.project_timeframe}
project_supplier={this.state.project_supplier}
onUserInput={(obj) => this.handleUserInput(obj)}
onFormSubmit={() => this.handleFormSubmit()} />
</Modal.Body>
<Modal.Footer>
<Button onClick={this.closeModal}>Cancel</Button>
</Modal.Footer>
</Modal>
<div className="col-md-12">
<div className="table-responsive">
{projectList}
</div>
</div>
</div>
)
}
}
const destination = document.querySelector(".projects")
document.addEventListener('DOMContentLoaded',() => {
const node = document.getElementById('projects_data')
const data = JSON.parse(node.getAttribute('data'))
ReactDOM.render(
<Projects projects={data} />,
destination)
})
:ここ
は、メインコンポーネントファイルです?
方が良いだけでサイドノートを助けることができるでしょう命名規則。反応の中の成分は、通常PascalCaseで名前が付けられます。だから私はそれらをProjectListとNoProjectと呼ぶでしょう。 –