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

在新的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;

从“React”导入React；
类AddTaskForm扩展了React.Component
{
onClick（）{
这是我的道具({
isVisible:false
});
}   
render（）{
返回(
添加任务
);
}
}
导出默认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'));

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'));

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var AddTaskForm=require（'./AddTaskForm'）；
类Todo扩展了React.Component
{
render（）{
返回(
但包装器并没有真正帮助我。
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;

从“React”导入React；
类AddTaskForm扩展了React.Component
{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state={isVisible:true}；
}
onClick（）{
这是我的国家({
isVisible:false
});
}   
render（）{
返回(
添加任务
);
}
}
导出默认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'));

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'));

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var AddTaskForm=require（'./AddTaskForm'）；
类Todo扩展了React.Component
{
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

另一种方法是将其存储在
Todo
组件上，但我认为您已经有足够的资源开始使用了。
您根本不应该使用
setProps
。React中的属性必须是不可变的数据，因此您无法更改它们。看起来
可见
属性实际上是组件状态的一部分，因为组件决定它显示或不显示自身。在这种情况下，当数据发生某些更改后，您需要更新组件时，最好的选择是状态。我建议您阅读本文

从你的例子来看：

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

这里有一个很大的优势：你甚至不需要渲染
AddTaskForm
，如果
isVisible
为false，那么就隐藏它。如果不需要，你就不渲染组件。
好吧，我想我明白你的意思了，也许isVisible应该处于状态。但这只是一个例子——问题是，我如何重新渲染AddTaskForm component设置新道具？你从
Todo
传递道具。你永远不应该设置组件自己的道具。好吧，我想我误解了道具。所以，总而言之-道具应该只从父组件传递给子组件，并且它们不应该再被修改、设置或更新，对吗？谢谢你的帮助！