Question

在新的React.js中，setProps方法已弃用0.14 React.Component方法。 According to documentation，现在我们应该使用新道具再次渲染组件（使用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，我必须在AddTaskForm重新发布Todo.js组件。在这种情况下我该怎么做？我已经阅读了这篇文章react's blog，但包装并没有真正帮助我。

Answer 1

你根本不应该使用setProps。 React中的属性必须是不可变数据，因此您无法更改它们。看起来isVisible prop实际上是组件状态的一部分，因为依赖于它的组件决定显示或不显示自己。在需要更新组件的某些数据更改之后，这种情况的最佳选择是状态。我建议你阅读doc about state and what should and should not go to 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为false，则隐藏它。如果不需要，则不渲染组件。

Answer 2

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;：

上

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.js

Todo

另一种方法是将它存储在sed -n l0 file组件上，但我认为你已经足够开始了。

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

2 个答案: