（React + Meteor）在另一个div中编辑内容？

我现在有这个作为我的“指数”为我的流星应用：（React + Meteor）在另一个div中编辑内容？

import React from 'react'; 

export const App = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    render() { 
    return <div className="app-div"> 
     **<Foo/>** 
     **<Bar/>** 
     { this.props.children } 
    </div>; 
    }, 
});

我想知道如果我能以某种方式通过“栏”更改代码“富”，内容。

从本质上讲，“富”会有这样的代码：

export class Foo extends React.Component { 
    render() { 
    return(
     <div className="test">TEXT TO BE REPLACED</div> 
    ); 
    } 
}

吧，也会有类似的代码：

export class Bar extends React.Component { 
    render() { 
    // Code goes here to change that div "test"'s content in Foo^^^^^^ 
    return(
     <div>...</div> 
    ); 
    } 
}

但我需要有某种形式的代码，改变了“要更换的文本“。有没有办法做到这一点？也许与反应DOM或东西？我是那种暴力破解通过这次我的路，所以我可能不知道基本原理，对不起

在此先感谢

来源

2016-11-13 pizzae

阵营含量变化变只向前，就像父母给孩子没有其他方式。你应该使用像redux这样的flux框架来实现这个功能 – saiyan

@saiyan因此，我无法以某种方式在html标签/元素的层次结构中“查找”吗？也许像parent.parent.parent.getelement（'test'）。text =新文本，或类似的功能？ – pizzae

不，没有办法。如果你熟悉角度'redux'就好比'services'或'factories'。 – saiyan

在阵营+流星，两个兄妹组件之间的通信应该通过他们的父母来完成。

对于你的情况，我会用一种状态，应用程序组件存储的内容“文本以替换”，和App组件内部的功能来更新状态内容：

import React from 'react'; 

export const App = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired, 
    }, 
    getInitialState() { 
    return { 
     fooText: '', 
    }; 
    }, 
    updateFooText(value) { 
    this.setState({ 
     fooText: value, 
    }); 
    }, 
    render() { 
    return (
     <div className="app-div"> 
     <Foo text={this.state.fooText} /> 
     <Bar updateFooText={this.updateFooText} /> 
     { this.props.children } 
     </div> 
    ); 
    }, 
}); 

export class Foo extends React.Component { 
    render() { 
    return (
     <div className="test">{this.props.text}</div> 
    ); 
    } 
} 

export class Bar extends React.Component { 
    onChangeHandler(e) { 
    this.props.updateFooText(e.target.value); 
    }, 
    render() { 
    // Code goes here to change that div "test"'s content in Foo^^^^^^ 
    return (
     <div> 
     <input type="text" onChange={this.onChangeHandler} /> 
     </div> 
    ); 
    } 
}

来源

2016-11-15 08:55:45 Khang

（React + Meteor）在另一个div中编辑内容？

回答

相关问题