我正在尝试找到正确的方法来定义一些可以通用方式使用的组件:
<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}用来定义包装器组件时,如何将一些属性传递给它的所有子组件？
我想出了两个解决方案,但他们都没有感觉到.
第一解决方案
state.input.onChange在P中创建一个函数,它接收一个事件并设置state.input.onChange给C1作为a props,让C1绑定this.props.onChange到onChangeFoo.这有效.每当Foo的值改变时,它会触发一个setStateP,所以P将输入传递给C2.
但由于同样的原因,它感觉不太正确:我正在从子元素设置父元素的状态.这似乎背叛了React的设计原则:单向数据流.
这是我应该怎么做的,还是有更多的React-natural解决方案？
二解决方案:
把Foo放在P.
但是,当我构建我的应用程序时,我应该遵循这个设计原则 - 将所有表单元素放入render最高级别的类中吗？
就像在我的例子中,如果我有一个大的C1渲染,我真的不想把整个renderC1放到renderP只是因为C1有一个表单元素.
我该怎么办？
嗨,我对React很新,并且非常难以绕过整个状态管理并通过状态和道具传递数据.我确实理解标准的反应方式是以单向方式传递数据 - 从父节点到子节点,我已经为所有其他组件这样做了.但我有一个名为Book的组件,它根据用户选择形式'read,wantToRead,currentReading和none'改变其"shelf"状态.在我的BookList组件中呈现Book组件,但它需要能够读取Book的架子状态并在名为'read,wantToRead,currentReading和none'的部分下呈现正确的书籍.而且由于在这种情况下,Book组件是从BookList组件呈现的,而BookList是父组件,我真的无法理解如何启用BookList来访问Book的状态？BookList组件:
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Book from './Book'
class BookList extends Component {
render(){
const { books, shelf } = this.props
return (
<div className="list-books">
<div className="list-books-content">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="bookshelf">
<h2 className="bookshelf-title">None</h2>
{books.map((book)=> {
console.log(book)
if (shelf === ''){
return <div className="bookshelf-books">
{/* <BookStateless book= {book} /> */}
<Book book = {book} />
{/* <BookStateless book= {book} /> */}
</div>
}
})}
</div>
<div className="bookshelf"> …我想让我的子组件有一个 ref，但我不希望用户在创建组件时必须指定 ref。所以说我有这样的事情：
<Parent>
<Child />
<Child />
</Parent>
我希望父组件能够访问子组件的状态。简单的方法是为每个组件添加一个 ref，但我希望这是在constructor()函数期间完成的事情，以将其从最终用户中抽象出来，因为我希望这些组件被通用化。
是否有一种干净的方法可以使父组件可以访问子组件的状态，例如在创建子组件时您有类似的东西：
class Child extends Component {
constructor(){
super();
this.state = {'abc': 123}
this.ref=Math.random();
}
}
因此，在 Parent 类中，我可以执行以下操作：
class Parent extends Component {
componentWillMount(){
console.log(this.refs);
}
}
所以我希望能够声明一组组件，例如：
class App extends Component {
render(){
<Parent> <Child /> <Child /> </Parent>
}
}
这样我就可以访问每个子组件，并且在父组件遍历子组件时它的状态。
我想<Child2>从父组件访问状态。
<Parent>
<Child1>
<Child2>
</Child1>
</Parent>
如何实现？