相关疑难解决方法(0)

我刚刚开始使用ReactJS,而且我对我遇到的问题有点困惑.

我的应用程序本质上是一个带有过滤器的列表和一个更改布局的按钮.目前我使用的三个组成部分:<list />,< Filters />和<TopBar />,现在很明显,当我更改设置的< Filters />我想在引发一些方法<list />来更新我的看法.

如何让这3个组件相互交互,或者我是否需要某种全局数据模型,我可以在其中进行更改？

我有一些逻辑,我已经把它放在reducer中,我认为应该把它放在Action中并传递下去？

将这类东西放入动作或减速器中是最佳做法吗？

这里的工作示例.

减速机代码:

function Card() {
  this.card = (Math.random()*4).toFixed(0);
}

Card.prototype = {
  getRandom: function(){
    var card;
    //console.log(this.card)
    switch (this.card) {
      case '1':
      card = 'heart';
      break;
      case '2':
      //card = 'diamonds';
      card = 'heart'; // weight the odds abit
      break;
      case '3':
      card = 'club';
      break;
      case '4':
      card = 'spade';
      break;
      default:
      card = 'heart';
      break;
    }
    return card;
  }
}

var dealer = {
  deal: function(){
    var results = [];
    for(var i = 0; i …

鉴于我最初的redux状态是:

const state = {
  currentView: 'ROOMS_VIEW',
  navbarLinks: List([
    {name: 'Rooms', key: 'ROOMS_VIEW'},
    {name: 'Dev', key: ''}
  ]),
  roomListsSelected: {group: 0, item: 0},
  roomLists: [
    {
      name: "Filters",
      expanded: true,
      listItems: [
        { icon: 'images/icon-warning.svg', name: 'Alerts', filter: room => room.hasAlert },
        { icon: 'images/icon-playlist.svg', name: 'In Progress', filter: room => room.progress > 20 },
        { icon: 'images/icon-playlist.svg', name: 'Almost Done', filter: room => room.progress > 90 },
        { icon: 'images/icon-playlist.svg', name: 'Complete', filter: room => room.status === 'complete' }, …

我正在使用material-ui的Dialog组件来实现我的React应用程序.如何将组件设置为变量以便我可以调用该onShow()方法？

我想从我的 React 应用程序中的不同组件打开一个模态，比如说“用户登录的模态”。例如：我希望模态从A.js,B.js和C.js. 因此，我制作了一个ModalWindow.js包含模态的新组件，并将其导入到A.js,B.js和C.js.

现在的问题是我必须showModal: false在所有 3 个组件中维护状态，以便 Modal 显示/隐藏。无论如何，我必须保持一个状态。

一种方法是我在父组件中维护状态。但是有没有更好的办法呢？

X.js

import A from 'A.js'
import B from 'B.js'
import C from 'C.js'

class X extends Component {
  return(
    render{
      <div>
        <A />
        <B />
        <C />
      </div>
    }
  )
}

export default X

A.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }; …

我正在使用React构建一个Web应用程序，该应用程序在一个已经选定的园区中显示您选择的建筑物的蓝图。

我有一个“内容”组件，可根据您的选择加载校园或建筑地图。“ BuildingMap”组件需要根据您选择的建筑物来加载特定的蓝图。它以建筑物的名称获取props.building，但我不知道如何使用该变量加载组件。

我尝试了导入，获取和要求，但似乎没有任何效果。

请帮忙。

我的代码如下所示：

//内容组件

<BuildingMap building={selectedBuilding} campus={selectedCampus} />

// BuildingMap组件

import *MyBlueprint* from (specific folder depending on the campus selected)

class BuildingMap extends React.Component {
  render(){
    return (
      <div className="blueprint" id={this.props.building}>
         {*MyBlueprint*}
      </div>
    )
  }
}

我无法弄清楚如何将 JSX 传递到我的 redux 状态，即对于全局使用的模态组件，并具有其 redux 状态，其中一个参数是content这样的内容可以更新以包含 JSX 代码。

目前，我正在让它呈现正确的内容，但似乎没有正确调用函数，而且我还收到以下错误：

invariant.js：38未捕获错误：对象作为React子项无效（发现：带有键的对象{dispatchConfig，_targetInst，isDefaultPrevented，isPropagationStopped，_dispatchListeners，_dispatchInstances，nativeEvent，type，target，currentTarget，eventPhase，bubbles，cancelable，timeStamp 、defaultPrevented、isTrusted、视图、详细信息、screenX、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、按钮、按钮、relatedTarget、pageX、pageY}）。如果您打算渲染子集合，请使用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 的渲染方法styled.div。

有很多以下错误：

warning.js:36 警告：出于性能原因重用此合成事件。如果您看到此内容，则说明您正在访问 nativeEvent已发布/无效的合成事件的属性。这被设置为空。如果必须保留原始合成事件，请使用 event.persist()。请参阅https://fbme（将其替换为不允许链接到 fb）/react-event-pooling 了解更多信息。

实施示例：

从页面调用的函数以显示模式并向其添加内容

  onToggleModal = () => {
    this.props.modalToggle(
      (<TopUp account={getSession().accounts[0] || {}} />)
    );
  }

哪里this.props.modalToggle有像这样的 redux 操作：

export const modalToggle = (content = '') => ({
  type: MODAL_TOGGLE,
  payload: content
});

然后我尝试在我的模态容器中渲染此类内容：

return (
 <div>{this.props.content}</div>
)

我导入React到我的减速器中，希望解决 jsx 问题，但没有成功。组件似乎也作为某种奇怪的对象传递给减速器。

所以，我试图找出最好的方法来做到这一点：

在反应中显示模态或隐藏模态。在我的主页上，我有很多照片，我当前的状态设置是：

export default class Main extends TrackerReact(Component) {
  constructor(props) {
   super(props);
   this.state = {
     showModal: false,
     modalPhoto: {},
   };

   this.close = this.close.bind(this);
   this.open = this.open.bind(this);
}
close() { this.setState({ showModal: false }); } // basic modal close
open(e) {
  this.setState({ modalPhoto: e });
  this.setState({ showModal: true });
}

当我将 showModal 设置为 true 时，它​​会传递给 bootstrap-react 模式：

<Modal
  show={this.props.show} >
  // ...loads modalPhoto form main state.modalPhoto
</Modal>

问题：每次打开模态时，它都会更改主状态并重新呈现主页面。阻止这种重新渲染发生的最佳实践方法是什么？我试过：

// in the main component
shouldComponentUpdate(nextProps, nextState) {
  if (this.state.showModal !== nextState.showModal) { …

React 16发布了许多新功能.其中一个是ReactDOM.createPortal(child, container) API,它可以直观地打破容器.

但是,它似乎不仅打破了它的容器,而且打破了我从Web开发的第一天学到的基本html规则.createPortal API允许您将组件从其父组件中渲染出来,并打破我们期望的html结构约定.

另一方面,我们确实检索了更多的灵活性,现在可以在兄弟或其他组件中呈现DOM.

IMO,我不认为通过交易html惯例获得更多灵活性是一个很好的协议.此外,官方提供的例子并不能说服我.

我很好奇的是:是否有人面临任何条件,createPortal API是必须的？

谢谢

我正在使用React和Electron构建桌面应用程序.由于它正在快速增长,我意识到我需要像Redux这样的某种状态管理来避免在组件之间传递许多属性.我开始阅读Redux官方文档,但仍然无法弄清楚如何在我的情况下实现它.我被卡住了!

例如,我有一个主要App组件,可以呈现许多子组件.其中一个有一个按钮.点击后,它应该向商店发送"事件",以便主要人员App可以采取行动.我怎么能做到这一点？我无法找到事件的概念,而且我已经开始讨论如何开始使用Redux.

为何举办活动 因为在这种情况下发送动作并修改应用程序状态对我来说似乎很愚蠢.我只想通知根组件根据用户操作调度操作.用户与表示组件交互,该表示组件应该告诉容器组件进行API调用或开始捕获音频/摄像机.

根据我现在所知,实现这一目标的唯一方法是改变状态,以便另一个侦听变化的组件检测到一个特殊值,意思是"嘿,让我们这样做",然后再次改变状态说"嘿,我是这样做",当它完成状态再次改变"嘿,它完成了".

有人能指出我正确的方向吗？