如何在React 0.14中使用新道具在顶层再次渲染组件

How to render component again at the top level with the new props in React 0.14

本文关键字：组件 新道具 React      更新时间：2023-09-26

在新的React.js 0.14中，setProps方法已从React.Component弃用。根据文档，现在我们应该用新的道具再次渲染组件(使用ReactDOM.render())问题是我该怎么做?让我们看一个例子。

AddTaskForm.js 

import React from 'react';
class AddTaskForm extends React.Component
{
    onClick() {
        this.setProps({
            isVisible: false
        });
    }   
    render() {
        return (
            <form role="form">
                <div className="row" className={ this.props.isVisible ? 'show' : 'hidden' }>
                    <input className="form-control" type="text" />
                </div>
                <button type="button" className="btn" onClick={this.onClick.bind(this)}>Add task</button>
            </form>
        );
    }
}
export default AddTaskForm;

Todo.js 

var React = require('react');
var ReactDOM = require('react-dom');
var AddTaskForm = require('./AddTaskForm');
class Todo extends React.Component
{
    render() {
        return (
            <div>
                <AddTaskForm isVisible="false"></AddTaskForm>
            </div>
        );
    }
}
ReactDOM.render(<Todo />, document.getElementById('app'));

顺便说一句。我使用的是ES6阶段0，如果你发现自己对语法感到困惑

好的，我不能调用setProps，我必须在Todo.js中渲染AddTaskForm组件。在这种情况下我怎么做呢?我在react的博客上读过这篇文章，但是wrapper并没有真正帮助我。

您根本不应该使用setProps。React中的属性必须是不可变的数据，所以你不能改变它们。看起来isVisible prop确实是组件状态的一部分，因为取决于它，组件决定显示或不显示自己。在更改数据后需要更新组件状态的情况下，最好的选择是。我建议阅读这个关于state的文档，以及哪些应该和不应该进入state

从你的例子:

<div>
    <AddTaskForm isVisible="false"></AddTaskForm>
</div>

. .你怎么知道AddTaskForm应该是可见的?现在它是硬编码的。我建议这样做:

render () {
    let shouldFormBeVisible = ...// somehow get to know should it be visible or not
    return (
        <div>
             shouldFormBeVisible ? <AddTaskForm /> : null
        </div>
    )
}

这是一个很大的优势:你甚至不需要渲染 AddTaskForm，如果isVisible是假的，那么隐藏它。

isVisible是一个可变状态，所以它需要被存储在某个状态。

一种方法是把它放在AddTaskForm: 
import React from 'react';
class AddTaskForm extends React.Component
{
    constructor(props, context) {
        super(props, context);
        this.state = { isVisible: true};
    }
    onClick() {
        this.setState({
            isVisible: false
        });
    }   
    render() {
        return (
            <form role="form">
                <div className="row" className={ this.state.isVisible ? 'show' : 'hidden' }>
                    <input className="form-control" type="text" />
                </div>
                <button type="button" className="btn" onClick={this.onClick.bind(this)}>Add task</button>
            </form>
        );
    }
}
export default AddTaskForm;

Todo.js 

var React = require('react');
var ReactDOM = require('react-dom');
var AddTaskForm = require('./AddTaskForm');
class Todo extends React.Component
{
    render() {
        return (
            <div>
                <AddTaskForm />
            </div>
        );
    }
}
ReactDOM.render(<Todo />, document.getElementById('app'));

另一种方法是将其存储在Todo组件上，但我认为您已经足够开始了。

相关文章：