Javascript 是通过了",；这"；背景通过道具反模式？

我有两个部分，一个是父母，一个是孩子，就像这样：

class Parent extends React.Component {
    shuffle() {
        ...
    }
    blur() {
        ...
    }
    next() {
        ...
    }
    previous() {
        ...
    }
    render() {
        return (
            <Child Parent={this} />
        );
    }
}

class Child extends React.Component {
    constructor(props) {
        super();

        this.state = {};

        this._onShuffleClick = this._onShuffleClick.bind(props.Parent);
        this._onPreviousClick = this._onPreviousClick.bind(props.Parent);
        this._onNextClick = this._onNextClick.bind(props.Parent);
    }
    _onShuffleClick(event) {
        event.preventDefault();

        this.shuffled ? this.shuffle(false) : this.shuffle(true); // I can call parents method here as the 'this' context is the 'Parent'.
        this.blur(event.target);
        this.setState({test "test"}); //I can set the parents state here
    }
    _onPreviousClick(event) {
        event.preventDefault();

        this.previous();
        this.blur(event.target);
    }
    _onNextClick(event) {
        event.preventDefault();

        this.next();
        this.blur(event.target);
    }
    render() {
        return (
            <a className="shuffle" key={1} onClick={this._shuffleOnClick}>{this.props.Parent.props.html.shuffle}</a>,
            <a className="previous" key={2} onClick={this._previousOnClick}>{this.props.Parent.props.html.previous}</a>,
            <a className="next" key={3} onClick={this._nextOnClick}>{this.props.Parent.props.html.next}</a>,
        );
    }
}

类父级扩展React.Component{
洗牌{
...
}
模糊（）{
...
}
下一个（）{
...
}
前（）{
...
}
render（）{
返回(
);
}
}
子类扩展了React.Component{
建造师（道具）{
超级（）；
this.state={}；
this.\u onShuffleClick=this.\u onShuffleClick.bind（props.Parent）；
this.\u onPreviousClick=this.\u onPreviousClick.bind（props.Parent）；
this.\onNextClick=this.\onNextClick.bind（props.Parent）；
}
_onShuffleClick（事件）{
event.preventDefault（）；
this.shuffled？this.shuffle（false）：this.shuffle（true）；//我可以在这里调用parents方法，因为“this”上下文是“Parent”。
模糊（event.target）；
this.setState（{test“test”}）；//我可以在这里设置父状态
}
_onPreviousClick（事件）{
event.preventDefault（）；
这是先前的（）；
模糊（event.target）；
}
_onNextClick（事件）{
event.preventDefault（）；
这个。下一个（）；
模糊（event.target）；
}
render（）{
返回(
{this.props.Parent.props.html.shuffle}，
{this.props.Parent.props.html.previous}，
{this.props.Parent.props.html.next}，
);
}
}

将上下文（'this'关键字）作为道具传递是一种反模式吗？ 从子级设置父级的状态是否错误

---

如果我这样做的话，我就不必向孩子传递太多的个人道具，我还可以从孩子身上设置家长的状态。

注意：我不是专家，也不是新手，请将此视为一种意见，而不是指南

我认为是的，因为您强制特定的实现。如果你想在《祖父母》中采用这些方法，你会怎么做？如果你使用道具，这项修改是非常容易的，但你的实施将是痛苦的屁股

还有一个特性叫做。让组件可重用真是太好了，但是如果你像你建议的那样去做的话，这是另一件你不能使用的事情

也许只是我，但这也造成了很大的困惑。你应该把所有你需要的东西都当作道具传递

还要像这样设置父状态

this.setState({test "test"}); //I can set the parents state here

---

我觉得很糟糕。我宁愿将父函数作为道具传递，并在传递之前绑定父函数。

注意：我不是专家，也不是初学者，请将其视为一种意见而不是指南

我认为是的，因为您强制特定的实现。如果你想在《祖父母》中采用这些方法，你会怎么做？如果你使用道具，这项修改是非常容易的，但你的实施将是痛苦的屁股

还有一个特性叫做。让组件可重用真是太好了，但是如果你像你建议的那样去做的话，这是另一件你不能使用的事情

也许只是我，但这也造成了很大的困惑。你应该把所有你需要的东西都当作道具传递

还要像这样设置父状态

this.setState({test "test"}); //I can set the parents state here

---

我觉得很糟糕。我宁愿将父函数作为prop传递，并在传递之前绑定父函数。

好吧，这主要是传递props的一个不好的用法，你也可以选择

{…props}

，我不想传递全名，你也可以使用

让{props}=this；让parentProps=props.Parent.props

。还有一个问题，为什么你会提到父母的道具，这似乎是一种糟糕的做法，除法和征服，只传递真正需要的道具，而不在你的子组件中假设某个父母组件是可用的

当您向下传递事件处理程序时，让这些事件处理程序绑定到您当前的this，但不要在子对象中将它们绑定到预期的父对象，有点像下面的示例

var StyledButton=React.createClass({
道具类型：{
clickHandler:React.PropTypes.func.Required，
文本：React.PropTypes.string.required
},
render:function（）{
让{clickHandler，text}=this.props；
返回{text}；
}
});
var MyForm=React.createClass({
单击：函数（）{
警惕（“哎哟”）；
},
render:function（）{
返回
}
})
ReactDOM.render(
,
document.getElementById（'容器'）
);
好吧，这主要是传递道具的一个不好的用法，你也可以选择
{…props}
，我不想传递全名，你也可以使用
让{props}=this；让parentProps=props.Parent.props
。还有一个问题，为什么你会提到父母的道具，这似乎是一种糟糕的做法，除法和征服，只传递真正需要的道具，而不在你的子组件中假设某个父母组件是可用的

当您向下传递事件处理程序时，让这些事件处理程序绑定到您当前的this，但不要在子对象中将它们绑定到预期的父对象，有点像下面的示例


var StyledButton=React.createClass({
道具类型：{
clickHandler:React.PropTypes.func.Required，
文本：React.PropTypes.string.required
},
render:function（）{
让{clickHandler，text}=this.props；
返回{text}；
}
});
var MyForm=React.createClass({
单击：函数（）{
警惕（“哎哟”）；
},
render:function（）{
返回
}
})
ReactDOM.render(
,
document.getElementById（'容器'）
);
您可以从子组件与父组件的
状态进行交互，但可能不是您试图实现这一点的方式

如果要将父级的所有
道具
发送给子级，可以执行以下操作：

<Child {...this.props} />

子项：

_modifyState = (bar) => {
  this.setState({foo: bar});
}
.....
<Child modifyState={this._modifyState} />

this.props.modifyState("Hello world!");

上面将在父级中为字符串设置
state.foo
<
class Parent extends React.Component {
  shuffle(e) {
    console.log(e.target);
    return false;
  }
  render() {
    return (
        <Child onShuffle={this.shuffle} />
    );
  }
}

class Child extends React.Component {
  render() {
    return(
      <a href='#' onClick={this.props.onShuffle}>Shuffle</a>
    );
  }
}
Child.propTypes = {
  onShuffle: React.PropTypes.func
}