天道酬勤,学无止境

反应:为什么道具改变时子组件不更新(React: why child component doesn't update when prop changes)

问题

为什么在以下伪代码示例中,当Container更改foo.bar时,Child不会重新呈现?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

即使在修改Container中的值后调用forceUpdate() ,Child仍会显示旧值。

回答1

更新子项,使其属性“键”等于名称。 每次更改键时,组件都会重新渲染。

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}
回答2

因为如果父项的props发生变化,但是STATE的状态发生变化,则子项不会重新呈现:

您显示的是这样的:https://facebook.github.io/react/tips/communicate-between-components.html

它将通过prop将数据从父级传递到子级,但是那里没有重渲染逻辑。

您需要为父级设置一些状态,然后在父级更改状态下重新渲染子级。 这可能会有所帮助。 https://facebook.github.io/react/tips/expose-component-functions.html

回答3

我有同样的问题。 这是我的解决方案,我不确定这是否是个好习惯,如果不是,请告诉我:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD:现在您可以使用React Hooks执行相同的操作:(仅当component是一个函数时)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);
回答4

根据React哲学的组成部分,无法更改其道具。 它们应该从父母那里收到,并且应该是不变的。 只有父母可以改变孩子的道具。

关于状态与道具的很好的解释

另外,请阅读此线程为什么我不能在react.js中更新道具?

回答5

functionsuseState创建React组件时。

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

工作

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

确实有效(添加密钥)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />
回答6

确认后,添加密钥即可。 我浏览了文档以尝试并了解原因。

在创建子组件时,React希望高效。 如果它与另一个子组件相同,则不会渲染新组件,这会使页面加载更快。

添加一个键会强制React渲染一个新组件,从而为该新组件重置State。

https://reactjs.org/docs/reconciliation.html#recursing-on-children

回答7

您应该使用setState函数。 否则,无论您如何使用forceUpdate,state都不会保存您的更改。

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

您的代码似乎无效。 我无法测试此代码。

回答8

使用setState函数。 所以你可以做

       this.setState({this.state.foo.bar:123}) 

在handle事件方法中。

状态一旦更新,将触发更改,然后进行重新渲染。

回答9

如果不保持任何状态而只是渲染道具然后从父级调用它,则应该将Child用作功能组件。 替代方法是,可以将钩子与功能组件(useState)一起使用,这将导致无状态组件重新呈现。

同样,您不应更改道具,因为它们是不可变的。 维护组件的状态。

Child = ({bar}) => (bar);
回答10
export default function DataTable({ col, row }) {
  const [datatable, setDatatable] = React.useState({});
  useEffect(() => {
    setDatatable({
      columns: col,
      rows: row,
    });
  /// do any thing else 
  }, [row]);

  return (
    <MDBDataTableV5
      hover
      entriesOptions={[5, 20, 25]}
      entries={5}
      pagesAmount={4}
      data={datatable}
    />
  );
}

此示例在props更改时使用useEffect更改状态。

回答11

我遇到了同样的问题。 我有一个Tooltip组件正在接收showTooltip道具,我根据if条件在Parent组件上进行了更新,正在Parent组件中对其进行了更新,但Tooltip组件未呈现。

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

我做的错误是将showTooltip声明为let。

我意识到自己做错了,我违反了渲染工作原理,用钩子代替了工作。

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);
回答12

在子组件的connect方法的mapStateToProps中定义更改的道具。

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

就我而言,channelList的频道已更新,因此我在mapStateToProps中添加了chanelList

回答13

在我的情况下,我正在更新向下传递给组件的loading状态。 在Button中, props.loading正按预期进行(从false切换为true),但是显示微调props.loading的三元组并没有更新。

我尝试添加密钥,添加使用useEffect()等更新的状态,但其他答案均无效。

对我有用的是改变了这一点:

setLoading(true);
handleOtherCPUHeavyCode();

对此:

setLoading(true);
setTimeout(() => { handleOtherCPUHeavyCode() }, 1)

我认为这是因为handleOtherCPUHeavyCode的过程非常繁琐,因此应用程序冻结了handleOtherCPUHeavyCode一秒钟。 增加1ms超时可以使加载布尔值更新,然后繁重的代码功能就可以完成工作。

回答14

我的案例涉及在props对象上具有多个属性,并且需要在更改其中的任何属性时重新渲染Child。 上面提供的解决方案可以正常工作,但是每个解决方案都添加了一个密钥,每个解决方案都变得乏味和肮脏(想象有15个...)。 如果有人面临这个问题,您可能会发现对props对象进行字符串化非常有用:

<Child
    key={JSON.stringify(props)}
/>

这样,对道具上每个属性的每个更改都会触发子组件的重新渲染。

希望对某人有所帮助。

回答15

您必须使用了动态组件。

在此代码段中,我们多次渲染子组件,并传递key

  • 如果我们多次动态地渲染一个组件,那么直到它的键被更改,React才会渲染该组件。

如果我们通过使用setState方法更改检查。 除非我们更改其,否则它不会反映在Child组件中。 我们必须将其保存在孩子的状态上,然后对其进行更改以相应地渲染孩子。

 class Parent extends Component { state = { checked: true } render() { return ( <div className="parent"> { [1, 2, 3].map( n => <div key={n}> <Child isChecked={this.state.checked} /> </div> ) } </div> ); } }

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • React中的state和props有什么区别?(What is the difference between state and props in React?)
    问题 我正在观看有关React的Pluralsight课程,并且讲师说不应更改道具。 我现在正在阅读有关道具与状态的文章(uberVU / react-guide),它说 道具和状态更改都会触发渲染更新。 在文章的后面,它说: 道具(属性的缩写)是组件的配置,如果可以的话,它是选项。 他们是从天上来的,是一成不变的。 所以道具可以改变,但它们应该是不变的? 什么时候应该使用道具,什么时候应该使用状态? 如果您有React组件需要的数据,是否应该通过getInitialState通过getInitialState或在React组件中进行设置来传递数据? 回答1 道具和状态是相关的。 一个组件的状态通常会成为子组件的道具。 道具作为React.createElement()的第二个参数传递给父对象的render方法中的子对象,或者,如果您使用的是JSX,则将其作为更熟悉的标签属性。 <MyChild name={this.state.childsName} /> 父级的childsName状态值成为子级的this.props.name 。 从孩子的角度来看,prop这个名字是一成不变的。 如果需要更改,则父级只需更改其内部状态即可: this.setState({ childsName: 'New name' }); React会为您将它传播给孩子。 接natural而来的自然问题是
  • 将道具传递给React.js中的父组件(Pass props to parent component in React.js)
    问题 在React.js中,没有一种简单的方法可以通过事件将孩子的props传递给其父对象吗? var Child = React.createClass({ render: function() { <a onClick={this.props.onClick}>Click me</a> } }); var Parent = React.createClass({ onClick: function(event) { // event.component.props ?why is this not available? }, render: function() { <Child onClick={this.onClick} /> } }); 我知道您可以使用受控组件来传递输入的值,但是最好传递整个工具包n'kaboodle。 有时,子组件包含一些您不想查找的信息。 也许有一种方法可以将组件绑定到事件? 更新– 2015年9月1日 使用后反应了一年多,和塞巴斯蒂安·洛伯的回答的刺激下,我已经得出结论传递子组件作为参数传递给函数的父母是不是其实做出反应的方式,也不是永远的好主意。 我已经换了答案。 回答1 编辑:请参见ES6更新示例的最终示例。 该答案仅处理直接父母与子女关系的情况。 当父母和孩子可能有很多中介人时,请检查此答案。 其他解决方案遗漏了重点 虽然它们仍然可以正常工作
  • 反应功能性无状态组件,PureComponent,Component; 有什么区别,什么时候应该使用什么?(React functional stateless component, PureComponent, Component; what are the differences and when should we use what?)
    问题 从React v15.3.0知道,我们有了一个名为PureComponent的新基类,以扩展内置的PureRenderMixin 。 我了解的是,在shouldComponentUpdate此方法对shouldComponentUpdate内部的道具进行了较浅的比较。 现在,我们有3种方法来定义React组件: 不扩展任何类的功能性无状态组件扩展PureComponent类的组件扩展Component类的常规组件 一段时间以前,我们曾经将无状态组件称为“纯组件”,甚至称为“哑组件”。 似乎“纯”一词的整个定义现在已经在React中改变了。 尽管我了解这三者之间的基本区别,但是我仍然不确定何时选择什么。 另外,每种性能对性能的影响和权衡是什么? 更新: 这些是我希望得到澄清的问题: 我应该选择将我的简单组件定义为功能性的(出于简单性考虑)还是扩展PureComponent类(出于性能的考虑)? 我为失去的简单性而付出了真正的权衡取舍,从而提高了性能吗? 当我始终可以使用PureComponent以获得更好的性能时,是否需要扩展普通的Component类? 回答1 您如何决定,如何根据我们组件的目的/尺寸/道具/行为在这三者之间进行选择? 使用自定义shouldComponentUpdate方法从React.PureComponent或从React
  • 如何将道具传递给{this.props.children}(How to pass props to {this.props.children})
    问题 我正在尝试找到定义可以以一般方式使用的组件的正确方法: <Parent> <Child value="1"> <Child value="2"> </Parent> 当然,在父组件和子组件之间存在渲染逻辑,您可以想象<select>和<option>作为此逻辑的示例。 对于这个问题,这是一个虚拟的实现: var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props.children}</div>); } }); var Child = React.createClass({ onClick: function() { this.props.doSomething(this.props.value); // doSomething is undefined }, render: function() { return (<div onClick={this.onClick}></div>); } }); 问题是,每当您使用{this.props.children}定义包装器组件时,如何将某些属性传递给所有子组件? 回答1 用新道具克隆儿童 您可以使用React.Children遍历子级,然后使用React
  • 从组件反应组件初始化状态(React component initialize state from props)
    问题 在React中,这两种实现之间有什么真正的区别吗? 一些朋友告诉我,FirstComponent是模式,但是我不明白为什么。 SecondComponent似乎更简单,因为渲染仅被调用一次。 第一的: import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { description: '' } componentDidMount() { const { description} = this.props; this.setState({ description }); } render () { const {state: { description }} = this; return ( <input type="text" value={description} /> ); } } export default FirstComponent; 第二: import React, { PropTypes } from 'react' class SecondComponent extends React.Component { state = { description: '' } constructor (props) => {
  • 如何将一个反应成分传递到另一个反应成分中以超越第一成分的含量?(How to pass in a react component into another react component to transclude the first component's content?)
    问题 有没有一种方法可以将一种组分传递到另一种反应组分中? 我想创建一个模型react组件,并传入另一个react组件以包含该内容。 编辑:这是一个reactJS codepen,说明了我正在尝试做的事情。 http://codepen.io/aallbrig/pen/bEhjo 的HTML <div id="my-component"> <p>Hi!</p> </div> ReactJS /**@jsx React.DOM*/ var BasicTransclusion = React.createClass({ render: function() { // Below 'Added title' should be the child content of <p>Hi!</p> return ( <div> <p> Added title </p> {this.props.children} </div> ) } }); React.renderComponent(BasicTransclusion(), document.getElementById('my-component')); 回答1 您可以使用this.props.children渲染组件包含的this.props.children : const Wrap = ({ children }) => <div>
  • 如何在React中更新父状态(How to update parent's state in React?)
    问题 我的结构如下所示: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 组件3应根据组件5的状态显示一些数据。由于道具是不可变的,因此我不能简单地将其状态保存在组件1中并转发它,对吗? 是的,我已经阅读了有关redux的内容,但不想使用它。 我希望有可能通过反应来解决。 我错了吗? 回答1 对于孩子与父母的通信,您应该传递一个将状态从父母设置为孩子的函数,如下所示 class Parent extends React.Component { constructor(props) { super(props) this.handler = this.handler.bind(this) } handler() { this.setState({ someVar: 'some value' }) } render() { return <Child handler = {this.handler} /> } } class Child extends React.Component { render() { return <Button onClick = {this.props.handler}/ > } } 这样
  • 了解React.js中数组子项的唯一键(Understanding unique keys for array children in React.js)
    问题 我正在构建一个React组件,该组件接受JSON数据源并创建一个可排序的表。 每个动态数据行都有一个分配给它的唯一键,但是我仍然遇到以下错误: 数组中的每个子代都应具有唯一的“键”道具。 检查TableComponent的渲染方法。 我的TableComponent渲染方法返回: <table> <thead key="thead"> <TableHeader columns={columnNames}/> </thead> <tbody key="tbody"> { rows } </tbody> </table> TableHeader组件是单行,还为它分配了唯一的键。 row中的每一rows都是由具有唯一键的组件构建的: <TableRowItem key={item.id} data={item} columns={columnNames}/> 并且TableRowItem看起来像这样: var TableRowItem = React.createClass({ render: function() { var td = function() { return this.props.columns.map(function(c) { return <td key={this.props.data[c]}>{this.props.data[c]}</td>; }
  • react-router-将道具传递给处理程序组件(react-router - pass props to handler component)
    问题 对于使用React Router的React.js应用程序,我具有以下结构: var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) { React.render(<Handler/>, document.body); }); 我想将一些属性传递到“ Comments组件中。 (通常,我会像<Comments myprop="value" />那样执行此操作) 用React Router做到这一点最简单,正确的方法是什么? 回答1 更新 自新版本发布以来
  • 将表单元素状态传递给同级/父元素的正确方法是什么?(What's the right way to pass form element state to sibling/parent elements?)
    问题 假设我有一个React类P,它渲染了两个子类C1和C2。 C1包含一个输入字段。 我将此输入字段称为Foo。 我的目标是让C2对Foo的变化做出反应。 我已经提出了两种解决方案,但是它们都不对。 第一个解决方案: 为P分配一个状态state.input 。 在P中创建一个onChange函数,该函数接受一个事件并设置state.input 。 将此onChange作为props传递给C1,然后让C1 this.props.onChange绑定到Foo的onChange上。 这行得通。 每当Foo的值更改时,它将触发P中的setState ,因此P将使输入传递给C2。 但是由于相同的原因,感觉不太正确:我正在从子元素中设置父元素的状态。 这似乎背叛了React的设计原理:单向数据流。 这是我应该怎么做,还是有一个更自然的React解决方案? 第二种解决方案: 只需将Foo放在P中即可。 但是,这是我在构建应用程序时应遵循的设计原则—将所有表单元素放入最高级别的render中吗? 就像在我的示例中一样,如果我有一个很大的C1渲染,我真的不想仅将C1的整个render都放在P的render ,因为C1具有一个form元素。 我该怎么办? 回答1 因此,如果我对您的理解正确,那么您的第一个解决方案是建议您将状态保留在根组件中? 我不能代表React的创建者,但是总的来说
  • 为什么reactjs中的setState是Async而不是Sync?(Why is setState in reactjs Async instead of Sync?)
    问题 我刚刚发现在任何组件中, this.setState()函数在响应中都是异步的,或者在完成调用函数后被调用。 现在我搜索并找到了这个博客(setState()状态更改操作在ReactJS中可能是同步的) 在这里,他发现setState是async(在堆栈为空时调用)或sync(在调用后立即调用),具体取决于触发状态更改的方式。 现在这两件事很难消化 在博客中, setState函数在一个updateState函数内部被调用,但是触发updateState函数的并不是被调用函数知道的东西。 他们为什么要使setState异步,因为JS是单线程语言,而此setState不是WebAPI或服务器调用,因此只能在JS的线程上完成。 他们这样做是为了使Re-Rendering不会停止所有事件侦听器和其他操作,或者存在其他设计问题。 回答1 您可以在状态值更新后调用一个函数: this.setState({foo: 'bar'}, () => { // Do something here. }); 另外,如果您有很多状态要一次更新,请将它们全部分组在同一setState : 代替: this.setState({foo: "one"}, () => { this.setState({bar: "two"}); }); 只需执行以下操作: this.setState({ foo: "one
  • 如何在React中更新嵌套状态属性(How to update nested state properties in React)
    问题 我正在尝试通过使用嵌套属性来组织我的状态,如下所示: this.state = { someProperty: { flag:true } } 但是像这样更新状态 this.setState({ someProperty.flag: false }); 不起作用。 如何正确地做到这一点? 回答1 为了设置嵌套对象的setState ,您可以按照以下方法进行操作,因为我认为setState无法处理嵌套更新。 var someProperty = {...this.state.someProperty} someProperty.flag = true; this.setState({someProperty}) 这个想法是创建一个虚拟对象,对其执行操作,然后用更新的对象替换组件的状态 现在,散布运算符仅创建该对象的一个​​嵌套嵌套副本。 如果您的状态是高度嵌套的,例如: this.state = { someProperty: { someOtherProperty: { anotherProperty: { flag: true } .. } ... } ... } 您可以在每个级别使用传播运算符来设置状态,例如 this.setState(prevState => ({ ...prevState, someProperty: { ...prevState
  • ReactJS-每次调用“ setState”时,渲染都被调用吗?(ReactJS - Does render get called any time “setState” is called?)
    问题 每当调用setState()时,React都会重新渲染所有组件和子组件吗? 如果是这样,为什么? 我以为这个想法是,当状态改变时,React只渲染所需的内容。 在下面的简单示例中,尽管onClick处理程序始终将state设置为相同的值,但是在随后的单击中状态不会改变,这两个类在单击文本时都再次呈现: this.setState({'test':'me'}); 我曾希望只有在state数据已更改的情况state才会进行渲染。 这是该示例的代码,作为JS小提琴和嵌入式代码段: var TimeInChild = React.createClass({ render: function() { var t = new Date().getTime(); return ( <p>Time in child:{t}</p> ); } }); var Main = React.createClass({ onTest: function() { this.setState({'test':'me'}); }, render: function() { var currentTime = new Date().getTime(); return ( <div onClick={this.onTest}> <p>Time in main:{currentTime}</p> <p>Click
  • 从父级调用子级方法(Call child method from parent)
    问题 我有两个组成部分: 父组件子组件 我试图从Parent调用Child的方法,我尝试过这种方法,但没有得到结果: class Parent extends Component { render() { return ( <Child> <button onClick={Child.getAlert()}>Click</button> </Child> ); } } class Child extends Component { getAlert() { alert('clicked'); } render() { return ( <h1 ref="hello">Hello</h1> ); } } 有没有一种方法可以从父级调用子级的方法? 注意:子组件和父组件位于两个不同的文件中。 回答1 首先,让我表达一下,这通常不是在React领域中解决问题的方法。 通常,您要做的是将功能传递给props中的子代,并传递事件中的子代通知(或者更好的是:dispatch)。 但是,如果必须在子组件上公开命令式方法,则可以使用引用。 请记住,这是一个逃生舱口,通常表示可以使用更好的设计。 以前,仅基于类的组件才支持引用。 随着React Hooks的出现,情况不再如此 使用挂钩和功能组件( >= react@16.8 ) const { forwardRef, useRef
  • 使用在React Components中转换DOM的JQuery插件?(Using JQuery plugins that transform the DOM in React Components?)
    问题 一些JQuery插件不仅会向DOM节点添加行为,还会对其进行更改。 例如,Bootstrap Switch转 <input type="checkbox" name="my-checkbox" checked> 变成像 <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate"> <div class="bootstrap-switch-container"> <span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span> <label class="bootstrap-switch-label"> </label> <span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span> <input type="checkbox" name="download-version" checked="" data-size="large" data-on-text="3" data-off-text="2.0.1"> <
  • 使用React路由器以编程方式导航(Programmatically navigate using React router)
    问题 通过react-router我可以使用Link元素来创建由react路由器本地处理的链接。 我在内部看到它调用this.context.transitionTo(...) 。 我想导航。 不是来自链接,而是来自下拉菜单(例如)。 如何在代码中执行此操作? 这是什么this.context ? 我看到了Navigation mixin,但是没有mixins可以做到吗? 回答1 带有钩子的React Router v5.1.0 如果您使用React> 16.8.0和功能组件,则在React Router> 5.1.0中有一个新的useHistory钩子。 import { useHistory } from "react-router-dom"; function HomeButton() { const history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); } 反应路由器v4 使用React Router v4,您可以采用三种方法在组件内进行编程路由。 使用withRouter高阶组件。 使用合成并渲染<Route> 使用context
  • 在React中显示或隐藏元素(Show or hide element in React)
    问题 我第一次弄乱React.js,找不到通过click事件在页面上显示或隐藏内容的方法。 我没有在页面上加载任何其他库,因此我正在寻找使用React库的本机方法。 到目前为止,这就是我所拥有的。 我想在click事件触发时显示结果div。 var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body); 回答1 大约在2020年做出反应 在onClick回调中,调用状态挂钩的setter函数以更新状态并重新呈现:
  • ReactJS:为什么将组件的初始状态传递为prop是反模式?(ReactJS: Why is passing the component initial state a prop an anti-pattern?)
    问题 我已经在SocketIO的帮助下创建了一个小的ReactJS仪表板,用于实时更新。 即使我更新了仪表板,它仍然使我感到困惑,因为我不确定我是否正确执行了操作。 最让我感到困扰的是getInitialState中的Props作为反模式发布。 我创建了一个仪表板,该仪表板从服务器获取实时更新,除了加载页面外,不需要用户交互。 根据我的阅读, this.state应该包含将确定是否应重新渲染组件的内容,以及this.props ....我还不知道。 但是,当您最初调用React.render(<MyComponent />, ...) ,您只能传递道具。 在我的情况下,我从服务器获取了所有数据,因此无论如何初始的道具最终都处于this.state 。 所以我所有的组件都有这样的东西: getInitialState: function() { return { progress: this.props.progress, latest_update: this.props.latest_update, nearest_center: this.props.nearest_center } } 除非我对上述博客文章有误解,否则这是反模式。 但是我看不到将状态注入Component的其他方法,而且我不明白为什么它是一种反模式,除非我重新标记所有道具以在其上添加initial道具。
  • 不变违规:对象无效,不能作为React子级(Invariant Violation: Objects are not valid as a React child)
    问题 在组件的render函数中,我有: render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } 一切都很好,但是当单击<li>元素时,出现以下错误: 未捕获的错误:始终违规:对象作为React子对象无效(找到:带有键{dispatchConfig,dispatchMarker,nativeEvent,target,currentTarget,type,eventPhase,气泡,cancelable,timeStamp,defaultPrevented,isTrusted,视图,详细信息,screenX的对象,screenY,clientX,clientY,ctrlKey,shiftKey,altKey,metaKey,getModifierState,按钮,按钮,relatedTarget,pageX,pageY,isDefaultPrevented,isPropagationStopped,
  • vuejs从子组件更新父数据(vuejs update parent data from child component)
    问题 我开始玩vuejs(2.0)。 我构建了一个包含一个组件的简单页面。 该页面具有一个带有数据的Vue实例。 在该页面上,我注册了该组件并将其添加到了html中。 该组件具有一个input[type=text] 。 我希望该值反映在父对象(主Vue实例)上。 如何正确更新组件的父数据? 从父级传递绑定的道具不好,并且会向控制台发出一些警告。 他们的文档中有内容,但是没有用。 回答1 Vue 2.0中不赞成使用双向绑定,而是倾向于使用事件驱动的体系结构。 通常,儿童不应该改变其道具。 相反,它应该$ emit事件,并让父级对这些事件作出响应。 在您的特定情况下,可以将自定义组件与v-model 。 这是一种特殊的语法,允许进行接近双向绑定的操作,但实际上是上述事件驱动的体系结构的简写形式。 您可以在这里阅读-> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events。 这是一个简单的例子: Vue.component('child', { template: '#child', //The child has a prop named 'value'. v-model will automatically bind to this prop props: [