Question

尝试将应用内网页转换为React。应用程序Webview会自动调用Javascript函数将访问令牌传递给网页。那么是否可以使用现有的相同函数来传递令牌变量并将其存储为React属性？

HTML

<div id="app"></div>
<script>
    function setToken(token){
    //set token to App token prop
  }
</script>

JS

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: "",
    }
  }

  render() {
    return (
      <div>
        <p>{this.state.token}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

https://jsfiddle.net/wzovs2gy/

Answer 1

您可以将其设为回调函数，因此将在有结果时为其提供另一个函数进行调用（这意味着它将从React内传递一个函数，该函数随后将更新状态/属性。）要用最少的更改做到这一点，我建议您让函数将令牌存储在一个变量中，然后在React中查询该变量。

Answer 2

在React应用程序之外访问React组件实例是不可能的，至少是不切实际的。这应该以相反的方式完成，组件应该公开全局功能：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      token: "",
    }
  }

  componentDidMount() {
    window.setToken = token => {
      this.setState({ token });
    }
  }

  ...
}

setToken不应在React组件初始化之前被调用。根据调用setToken的位置，将使用它的代码包装到React应用程序中而不使用全局变量可能是有益的。

Answer 3

我修改了小提琴：

 <DataGridTemplateColumn>
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Expander Style="{StaticResource PlusMinusExpanderStyle}"
                                                  ToolTip="Rule Details"
                                                  Visibility="{Binding ISMonitorExanderVisible, Converter={StaticResource BooleanToVisibilityConverter}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                                  >
                                            <Expander.IsExpanded>
                                                <Binding RelativeSource="{RelativeSource AncestorType={x:Type DataGridRow}}"
                                                         Path="DetailsVisibility"
                                                         Mode="TwoWay">
                                                    <Binding.Converter>
                                                        <converters:BooleanToVisibilityDataGridRow FalseToVisibility="Collapsed" />
                                                    </Binding.Converter>
                                                </Binding>
                                            </Expander.IsExpanded>
                                        </Expander>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>

https://jsfiddle.net/wzovs2gy/1/

Answer 4

感谢您的帮助，我们设法找到了解决方案（尽管工作并不优雅）。我将ReactDom.Render（）声明为一个变量，该变量使我可以在Vanilla JS中的React Parent中引用该函数。

JS

var ReactDom = ReactDOM.render(<App />, document.querySelector("#app"));

HTML

function setToken(token){
    ReactDom.setNewToken(token);
  }

https://jsfiddle.net/wzovs2gy/2

从外部js传递参数以响应prop

4 个答案: