相关疑难解决方法(0)

随着react-router我可以使用Link元素创建的原生处理反应路由器链接.

我看到内部调用this.context.transitionTo(...).

我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做？什么是this.context？

我看到了Navigationmixin,但是我可以不用mixin吗？

在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.

在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

如何从React Router v4的功能重定向到Cart页面？

我正在开发中,我检查,如果用户不是一个应用程序loggedIn我都显示登录表单,否则dispatch一个action将改变路线和加载其他组件.这是我的代码:

render() {
    if (isLoggedIn) {
        // dispatch an action to change the route
    }
    // return login component
    <Login />
}

我怎么能实现这一点,因为我无法改变渲染功能内的状态.

我Material-UI在我的项目中使用，我在控制台中收到警告：

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

虽然没有直系后裔，

<form>
  <TextField
    label="Title"
    value={title}
    onChange={this.handleChange("title")}
    className={classes.formControl}
    margin="normal"
  />
  <br />
  <FormControl className={classes.formControl}>
    <InputLabel>Muscles</InputLabel>
    <Select
      value={muscles}
      onChange={this.handleChange("muscles")}
    >
      {categories.map((category, index) => {
        return (
          <MenuItem key="index" value={category}>
            {category}
          </MenuItem>
        );
      })}
    </Select>
  </FormControl>
  <br />
  <TextField
    multiline
    rows={4}
    label="Description"
    value={description}
    onChange={this.handleChange("description")}
    className={classes.formControl}
    margin="normal"
  />
</form>

这是沙盒链接：

https://codesandbox.io/s/react-material-ui-0yqeo

就我而言，我有这样的事情：

<div className="projects">
  {getProjectList().map(p => (
    <Link key={p.id} 
          className='project' 
          to={`/project/${p.id}`} 
          style={{border: '2px solid red'}}
    >
        #{p.id} - {p.name}
        <div className="helpers">
          <Button
            icon="trash"
            size="mini"
            color="red"
            onClick={e => {
              e.preventDefault();
              e.stopPropagation();
              setDeleting(p);
            }}
          />
          <Button
            size="mini"
            color="red"
            as={Link}
            to={`/edit/${p.id}`}
          >Edit</Button>
        </div>
    </Link>
  ))}
</div>

视觉上表示如下：

我更愿意保持这样，因为它按预期工作。

为什么我想要这样的附加解释：我想向用户提供用鼠标右键单击两个链接并选择“在新选项卡中打开链接”的能力。导航到项目的详细信息，并导航到编辑表单以更改项目的属性（这是两个不同的页面）。

但在这种情况下，我有两个相互嵌入的时间标签，并且 React 生成：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

有什么方法可以抑制吗？